Antd -有没有什么方法可以改变卡片标题的背景颜色？
Antd -有没有什么方法可以改变卡片标题的背景颜色？
提问于 2017-06-13 10:25:52
通过添加style属性，我只能更改Card组件的正文部分的颜色。如何更改标题部分？
<Card title='Card title' bordered loading={this.onLoading()}
style={{ backgroundColor: '#aaaaaa' }}>
<Row type='flex' justify='center'>
<h1>Card content</h1>
</Row>
</Card>
回答 3
Stack Overflow用户
发布于 2018-12-04 18:54:01
下面的方法对我很有效。我必须删除整个卡片的背景色，并为头部和正文内容设置不同的背景色：
<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>结果：
希望它能帮上忙！
Stack Overflow用户
发布于 2017-06-13 18:50:21
最后，我别无选择，只能使用css来解决这个问题。Ant卡的结构类似于
<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背景设置为none，并且它可以工作。
Stack Overflow用户
发布于 2017-06-13 10:43:29
你打错了。style:{{backgroundColor:'#aaaaaa'}}应该是style={{ backgroundColor: '#aaaaaa' }}，它适用于我：
使用相同的代码，它确实可以工作：
我可能需要检查您的页面，以了解为什么它不适用于您
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44511421
复制相关文章
相似问题
腾讯云开发者
