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

【问题标题】：Antd - is there anyway to change background color of the Card title?Antd - 有没有改变卡片标题的背景颜色？
【发布时间】：2017-06-13 02:25:52
【问题描述】：

通过添加样式属性，我只能更改 Card 组件的主体部分的颜色。我怎样才能更改标题部分？

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

【问题讨论】：

标签： reactjs antd

【解决方案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>

结果：

希望对你有帮助！

【讨论】：

这是最新版本的蚂蚁设计。问题是卡片没有headStyle属性的旧版本

【解决方案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-没有卡体背景，它的工作原理。

【讨论】：

使用headStyle!

【解决方案3】：

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

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

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

【讨论】：

感谢您的快速回复。它仍然对我不起作用。我编辑了帖子并添加了一个示例。
完全相同的代码，它对我有用.. 你能检查一下标题的风格吗？
顺便说一句，你是否使用'antd'来产生结果，即import {Card} from 'antd'
是的。我只是使用import { Card, Row } from 'antd'
与"antd": "^2.11.0"

【解决方案4】：

适用于 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;
}

截图：

【讨论】：