Antd - is there anyway to change background color of the Card title?

问题

By adding the style attribute I can only change the color of the body part of the Card component. How can I change the title part as well?

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

回答1:

The following worked for me. I had to remove the background color of the entire card and set a different background color both for the Head and Body content:

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

Result:

Hope it helps!

回答2:

You have some typo. style:{{backgroundColor:'#aaaaaa'}} should be style={{ backgroundColor: '#aaaaaa' }} and it works for me:

Using the same code and it does work:

I may need to inspect your page to know why it doesn't work for you

回答3:

Finally i have no choice and use css to get around that. The structure of the antd card is like

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

and .ant-card-head has the background style as #fff.

if I do sth like <Card style={{background:"#aaa"}}, it will override the .ant-card class. If I do <Card bodyStyle={{background:"#aaa"}}, it will override the .ant-card-body class and I couldn't find any direct way to override the .ant-card-head class, so I ended up use css to set the .ant-card-body background to none and it works.

来源：https://stackoverflow.com/questions/44511421/antd-is-there-anyway-to-change-background-color-of-the-card-title

标签

reactjs

antd