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

【问题标题】：giving border radius to ant-design card in react在反应中为蚂蚁设计卡提供边界半径
【发布时间】：2021-08-27 10:25:24
【问题描述】：

所以，我有需要边框半径的 ant-design 卡，但是如果我添加内联 CSS，它仍然无法正常工作，我也尝试过

下面是代码：

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

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

【问题讨论】：

添加内联 css 应该可以正常工作 - codesandbox.io/s/basic-card-antd-4-16-13-forked-0tki1?file=/…

标签： css reactjs antd

【解决方案1】：

在卡片样式中添加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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

是的，我也试过了。但我得到了相同的结果

【解决方案3】：

表名{" "} ]} >

卡片内容

【讨论】：