根据评论中的讨论,其中一个类似乎覆盖了内联样式。发生这种情况的唯一方法是如果这些类中的任何一个正在使用!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 https://github.com/facebook/react/issues/1881,问题还没有解决。
所以这是我建议的解决方案:
创建另一个类,仅添加一个!important
为您提供边界半径。您可以这样做:
<div className="no-borderRadiusImportant border-radiusImportant">Hello, world!</div>
有了CSS,
.border-radiusImportant{
border-radius: 5px !important;
}
这是一个fiddle https://jsfiddle.net/odns10fn/1/与此相关的各种场景。
Original
<table className="table table-striped table-bordered" style='border-radius:5px;'>
<tbody>
{data}
</tbody>
</table>
如果边界半径是常量值,则无需动态设置!