css - borderRadius样式属性未在reactjs中倒圆 Angular

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

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

最佳答案

根据注释中的讨论，似乎其中一个类正在重写内联样式。发生这种情况的唯一方法是，如果这些类中的任何一个都使用!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>

如果它是一个恒定值，则无需动态设置边界半径!