Question

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

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

Answer 1

根据评论中的讨论，似乎其中一个类重写了内联样式。唯一可能发生的方法是，如果这些类中的任何一个使用@Entity public class MyModel { @Id private Long id; @Column(name = "EXTERNAL_ID") // Column annotation is not required if you respect case-sensitive private Long externalId; // Getters, setters }来确保它们的样式值优先于内联值。

记住这一点，我尝试将!important添加到内联样式：

!important

使用CSS：

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

它不起作用。根据讨论here，问题尚未解决。

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

创建另一个只为您添加.no-borderRadiusImportant { border-radius: 0px !important; }边框半径的类。这是你如何做到的：

!important

使用CSS，

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

这是与此相关的各种方案的fiddle。

<强>原始

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

如果它是一个常量值，则无需动态设置边界半径！

Answer 2

试试这段代码：

您不需要报价。

https://facebook.github.io/react/tips/inline-styles.html

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

Answer 3

style道具期望从样式属性到值而不是字符串的映射。例如，使用JSX时，样式= {{marginRight：间距+'单位'}}

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

Answer 4

尝试将另一个borderCollapse: 'collapsed'与您的borderRadius: '5px'一起添加到您的样式对象。

https://www.w3schools.com/cssref/pr_border-collapse.asp

Answer 5

您可以像下面那样使用

borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number

Answer 6

我也遇到了同样的问题，如果您使用Box组件，则可以修复它。有关更多详细信息，请参见材料ui链接。 https://material-ui.com/pt/system/borders/

import Box from '@material-ui/core/Box';
...
<Box borderRadius="50%"/>
  enter your component here

Answer 7

您错过了关键的 transaction.item。

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

overflow: hidden

borderRadius样式属性不会舍入reactjs中的边

7 个答案: