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

antd card
antd card height
antd title
ant design background color
antd change button color
antd override css
antd responsive grid
antd color picker

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>

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!

Card component inline title styling · Issue #6654 · ant-design/ant , How can I change the title part as well? <Card title='Card title' bordered loading={​this.onLoading()} style={{ backgroundColor: '#aaaaaa' }}> <Row type='flex'  Card component title can't be individually styled I'm building a page using multiple cards, and would like to have each of the titles in a different color, but right now it can't be done using this component. What does the proposed API look like? <Card titleStyle={{ background: '#ff0000' }}> Card content </Card>

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

Card, Card component title can't be individually styled I'm building a page using multiple cards, and would like to have each of the titles in a different color, but right or Segment Fault, then apply tag antd and react to your question. set the background color of the card head, you need to override .ant-card-head. Card. Simple rectangular container. When To Use #. A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

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.

Antd, A basic card containing a title, content and an extra corner content. Supports two sizes: No border. A borderless card on a gray background. expand code. The definition of neutral color palette is balanced with readability, aesthetics and usability. Base Color Palettes # Ant Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.

ant-design/ant-design-english, How can I change the title part as well? <Card title='Card title' bordered loading={​this.onLoading()} style={{ backgroundColor: '#aaaaaa' }}> <Row type='flex'  See this image There is a title tag that hovers over each one of the social icons. I am trying to change the background color of the bubble where the title tag is.

Ant Design, Is there anything similar to the bootstrap css for antd? Ji Baik. @JiBaik Anyone knows how to change the background color of the Card title? Chuang Yu. Hi am a beginner in Javafx and wants to know that is there any way to change the color of title bar in Javafx. I tired looking up online but couldn't fine a proper suggestion.

Cards · Bootstrap, Basic card. A basic card containing a title, content and an extra corner content. expand code No border. A borderless card on a gray background. expand code. We’ll show you how to change the title bar background and theme in Word, but the procedure is the same in Excel, PowerPoint, and Outlook as well. To begin, click the “File” tab. On the backstage screen, click “Options” in the list of items on the left.

Comments
  • This is for latest version of ant design.. Question is for old version where card doesn't have headStyle attribute
  • Thanks for quick response. It still doesn't work for me. I edited the post and added an example.
  • Exact same code, it does work for me.. Can you inspect the style of title?
  • BTW, are u using 'antd' for producing the result, i.e., import {Card} from 'antd'
  • Yes. I simply use import { Card, Row } from 'antd'
  • with "antd": "^2.11.0"