Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

reactjs

antd

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>

enter image description here

like image 341
Rick Lee Avatar asked Dec 23 '22 17:12

Rick Lee


1 Answers

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:

Result after applying 3 styles

Hope it helps!

like image 136
Murillo Ferreira Avatar answered Dec 31 '22 02:12

Murillo Ferreira