Antd - 无论如何都要更改卡片标题的背景颜色？

Question

通过添加样式属性，我只能更改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

你有一些错字。 style:{{backgroundColor:'#aaaaaa'}}应为style={{ backgroundColor: '#aaaaaa' }}，对我有用：

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

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

Answer 2

最后我没有选择并使用CSS来解决这个问题。 antd卡的结构就像

<div class="ant-card ant-card-bordered">
    <div class="ant-card-head" \>
    <div class="ant-card-body" \>

和.ant-card-head的背景样式为#fff。

如果我做<Card style={{background:"#aaa"}}，它将覆盖.ant-card类。如果我<Card bodyStyle={{background:"#aaa"}}，它将覆盖.ant-card-body类，我无法找到任何直接的方法来覆盖.ant-card-head类，所以我最终使用css来设置.ant-card-body背景为无，并且有效。

Answer 3

以下内容对我有用。我必须删除整个卡片的背景色，并为“头部”和“身体”内容设置不同的背景色：

<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>

结果：

希望有帮助！