borderRadius样式属性未在reactjs中变圆 [英] borderRadius style property not rounding the edges in reactjs

问题描述

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

我希望对表格的边缘进行圆角处理，但是上述样式根本无法使用。有没有办法做到这一点？

I want the edges of the table to be rounded, but the above style is not working at all. Is there a way to do this ?

推荐答案

基于注释中的讨论，似乎其中一个类正在覆盖内联样式。发生这种情况的唯一方法是，如果这些类中的任何一个都使用！important 来确保其样式值优先于内联值。

Based on the discussion in comments, it seems like one of the classes is overriding the inline style. The only way this could happen is if either of those classes is using !important to ensure that their style values take precedence over the inline values.

记住这一点，我尝试在内联样式中添加！important ：

Keeping that in mind, I tried adding !important to the inline style:

<div className="no-borderRadiusImportant" style={{border: '1px solid black',borderRadius: '5px!important'}}>Hello, world!</div>

使用CSS：

.no-borderRadiusImportant {
  border-radius: 0px !important;
}

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

It doesn't work. And based on the discussion here, the issue has not been fixed yet.

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

So here's the solution I would suggest:

创建另一个仅添加的类！ 的边界半径。操作方法如下：

Create another class that merely adds an !important border radius for you. Here's how you could do it:

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

使用CSS

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

这里是小提琴用于与此相关的各种情况。

Here's a fiddle for various scenarios related to this.

原始

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

如果边界半径为常数，则无需动态设置边界半径！

You don't need to set the border radius dynamically, if it is a constant value!

这篇关于borderRadius样式属性未在reactjs中变圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！