4

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

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

在此处输入图像描述

4

3 回答 3

8

以下对我有用。我必须删除整个卡片的背景颜色,并为 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>

结果:

应用 3 种样式后的结果

希望能帮助到你!

于 2018-12-04T10:54:00.913 回答
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背景无,它的工作原理。

于 2017-06-13T10:50:20.757 回答
1

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

在此处输入图像描述


使用相同的代码,它确实有效:

在此处输入图像描述

在此处输入图像描述

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

于 2017-06-13T02:43:29.477 回答