在reactjs中borderRadius样式属性不圆边

Question

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

我希望桌子的边缘是圆形的，但是上面的样式根本不起作用。有没有办法做到这一点 ？

原文由 ssss 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

它不起作用。根据 此处 的讨论，问题尚未解决。

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

创建另一个类，它只为您添加 !important 边界半径。您可以这样做：

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

使用 CSS，

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

这是与此相关的各种场景的 小提琴。

原来的

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

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

原文由 Nisarg Shah 发布，翻译遵循 CC BY-SA 3.0 许可协议