reactjs 如何使www.example.com的卡片ant.design小？

6yjfywim 于 2023-02-22 发布在 React

关注(0)|答案(4)|浏览(128)

我使用ant.designCard组件在react/redux中显示聊天web应用的消息。现在每张卡片周围的空间都太大了。有没有办法让卡片更靠近文本？

其中React代码为：

<Card
                            bordered={false}
                            style={{
                                // other styles...
                                width: width,
                                height: 70 <== just decreasing this number doesn't work 
                            }}
                        >
                            <p>{message.contents}</p>
                        </Card>

仅降低高度不起作用，并产生：

reactjs

来源：https://stackoverflow.com/questions/49541607/how-can-you-make-the-cards-for-ant-design-smaller

4条答案

按热度按时间

hrysbysz1#

我没有使用Card，而是使用了一个常规的p标签，其中包含borderRadius和padding：

<p
                        style={{

                            borderRadius: '25px',
                            padding: '4px 15px 4px'
                        }}
                    >

赞(0）回复(0）举报 2023-02-22

pb3s4cty2#

可以使用内联样式属性bodyStyle将样式应用于卡片内容。
保持组件清洁的更好方法是使用css。

<Card className="custom-card" bordered={false}>
    <p>Hey Hunter</p>
  </Card>

CSS：

.custom-card {
  width: 100px;
  height: 35px;
}

.custom-card > .ant-card-body {
  display: table; 
  width: 100%;
  height: 100%;
  padding: 5px;
}

.custom-card > .ant-card-body > p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell; 
}

检查**DEMO**。

赞(0）回复(0）举报 2023-02-22

jchrr9hc3#

我会先在dev工具中检查元素，但更有可能的是，您应该将卡片的高度设置为'auto'，并在里面的文本中添加填充。
<p class='message-contents'>{message.contents}</p>
并瞄准它：
.message-contents { padding: 20px; }
将卡片内的空间设置为文本每边20px。将其更改为您想要的值。
我还建议在卡片上使用一个类，并将所有样式放在一个外部样式表中，但这两种方法都有效。

赞(0）回复(0）举报 2023-02-22

mtb9vblg4#

您可以使用Row的gutter属性作为网格间距，我们建议将其设置为（16 + 8 n）px。（n代表自然数。）
您可以将其设置为类似**{ xs：8例，SM：16例，MD：24，lg：32 }用于响应式设计。
您可以使用数组设置垂直间距，[水平，垂直] [16，{ xs：8例，SM：16例，MD：24，长度：32 }]。**
https://ant.design/components/grid/

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何使www.example.com的卡片ant.design小？

4条答案

相关问题

热门标签

最新问答