通过添加 style 属性，我只能更改 Card 组件主体部分的颜色。我该如何更改标题部分？
<Card title='Card title' bordered loading={this.onLoading()}
style={{ backgroundColor: '#aaaaaa' }}>
<Row type='flex' justify='center'>
<h1>Card content</h1>
</Row>
</Card>
Antd - 有没有改变卡片标题的背景颜色？
IT技术
reactjs
antd
2021-05-07 17:52:49
3个回答
以下对我有用。我必须删除整个卡片的背景颜色，并为 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>
结果：
希望能帮助到你！
最后我别无选择并使用 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没有背景，它的工作原理。
你有一些错字。style:{{backgroundColor:'#aaaaaa'}}应该是style={{ backgroundColor: '#aaaaaa' }}，它对我有用：
使用相同的代码，它确实有效：
我可能需要检查您的页面以了解为什么它对您不起作用