Antd - 有没有改变卡片标题的背景颜色？

Question

通过添加 style 属性，我只能更改 Card 组件主体部分的颜色。我该如何更改标题部分？

<Card title='Card title' bordered loading={this.onLoading()}
    style={{ backgroundColor: '#aaaaaa' }}>
    <Row type='flex' justify='center'>
    <h1>Card content</h1>
    </Row>
</Card>

Answer 1

以下对我有用。我必须删除整个卡片的背景颜色，并为 Head 和 Body 内容设置不同的背景颜色：

<Card
title="Track title"
style={{backgroundColor: 'rgba(255, 255, 255, 0.0)', border: 0 }}
headStyle={{backgroundColor: 'rgba(255, 255, 255, 0.4)', border: 0 }}
bodyStyle={{backgroundColor: 'rgba(255, 0, 0, 0.4)', border: 0 }}
>
    <Card.Meta
    description="Track author"
    />
</Card>

结果：

希望能帮助到你！

Answer 2

适用于 antd 4.x 版本

您可以使用headStyle和bodyStyle属性来更改背景颜色

 <Card
    title="Card title"
    headStyle={{ backgroundColor: '#5c6cfa', color: '#ffffff' }}
    bodyStyle={{ backgroundColor: '#a9bbff' }}
    bordered={false}
    style={{ width: 300 }}
  >
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>

或者

您可以自定义css类

.ant-card-head {
  background: #5c6cfa;
  color: #ffffff;
}

.ant-card-body {
  background: #a9bbff;
}

截屏：

Answer 3

你有一些错字。style:{{backgroundColor:'#aaaaaa'}}应该是style={{ backgroundColor: '#aaaaaa' }}并且它对我有用：

使用相同的代码，它确实有效：

我可能需要检查您的页面以了解为什么它不适合您