在反应中为蚂蚁设计卡提供边界半径

Question

所以，我有一个需要边框半径的 ant-design 卡，但是如果我添加 Inline CSS，它仍然不起作用，我也试过了

下面是代码：

<Card style = {{width: 300, margin: "20px", borderRadius: "20px"}} actions = {[<h4 style = {{ paddingTop: "6px"}} key="Name">Table Name </h4>,]}></Card>

有什么办法可以控制这张卡的边框半径吗？

Answer 1

如果您在样式对象中使用 px，则无需指定测量单位。

只需将 borderRadius: "20px" 更改为 borderRadius: 20 - https://codesandbox.io/s/basic-card-antd-4-16-13-forked-jl9fv?file=/index.js

如果 ant-design 在他们的 API 中有这个就好了，但看起来他们把它留给了你。

Answer 2

将overflow:hidden和borderRadius添加到卡片样式将解决动作容器的角不圆的问题。

<Card
  style={{
    width: 300,
    margin: "20px",
    borderRadius: "20px",
    overflow: "hidden"
  }}
  actions={[
    <h4 style={{ paddingTop: "6px" }} key="Name">
      Table Name{" "}
    </h4>
  ]}
>
  <p>Card content</p>
  <p>Card content</p>
  <p>Card content</p>
</Card>

Answer 3

Table姓名{" "} ]} >

卡片内容

在反应中为蚂蚁设计卡提供边界半径

giving border radius to ant-design card in react

css

reactjs

antd