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

Question

<table className="table table-striped table-bordered" style={{'borderRadius':'5px'}}>
  <tbody>
      {data}
  </tbody>
</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;
}

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

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

创建另一个仅为您添加!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>

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

Answer 2

你错过了关键的overflow: hidden。

如果没有这个关键部分，表格中溢出的内容将不会显示圆角。

<table style={{borderRadius: '5px', overflow: 'hidden'}}>
  <tbody>
      {data}
  </tbody>
</table>