IT技术 - borderRadius 样式属性不会使 reactjs 中的边缘变圆 - 吾爱随笔录

IT技术 css reactjs

2021-05-16 08:40:10

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

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

4个回答

根据评论中的讨论，似乎其中一个类覆盖了内联样式。发生这种情况的唯一方法是，如果这些类中的任何一个!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>

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

试试这个代码：

你不需要引号。

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

该styleprops预计从风格属性值的映射，而不是一个字符串。例如，使用 JSX 时 style={{marginRight: spatial + 'units'}}

style={{borderRadius: 5 + 'px'}}

尝试将另一个borderCollapse: 'collapsed'与borderRadius: '5px'.

其它你可能感兴趣的问题