css - borderRadius 样式属性不会使 reactjs 中的边缘变圆

Question

<table className="table table-striped table-bordered" style={{'borderRadius':'5px'}}>
  <tbody>
      {data}
  </tbody>
</table>

我想让 table 的边缘变圆，但上面的样式根本不起作用。有没有办法做到这一点 ？

Answer 1

根据评论中的讨论，似乎其中一个类覆盖了内联样式。发生这种情况的唯一方法是如果这些类中的任何一个使用 !important以确保它们的样式值优先于内联值。

牢记这一点，我尝试添加 !important到内联样式:

<div className="no-borderRadiusImportant" style={{border: '1px solid black',borderRadius: '5px!important'}}>Hello, world!</div>

使用 CSS:

.no-borderRadiusImportant {
  border-radius: 0px !important;
}

它不起作用。并基于讨论 here ，这个问题还没有解决。

所以这是我建议的解决方案:

创建另一个仅添加 !important 的类边界半径为您服务。你可以这样做:

<div className="no-borderRadiusImportant border-radiusImportant">Hello, world!</div>

使用 CSS，

 .border-radiusImportant{
   border-radius: 5px !important;
 }

这是一个 fiddle对于与此相关的各种场景。

原装

<table className="table table-striped table-bordered" style='border-radius:5px;'>
  <tbody>
      {data}
  </tbody>
</table>

你不需要动态设置边界半径，如果它是一个常数值!