CODEWITHSUNDEEP
javascriptreactjsantd
Carrein
Carrein

Reputation: 3371

How to change the title font of Ant Design card component?

How can I change only the title font but retain the default font for the child of the Card component of Ant Design?

Sample Card component:

// How to change title style
<Card title="Default" extra={<a href="#">More</a>} style={{ width: 300 }}>
  <p>Card content</p>
  <p>Card content</p>
  <p>Card content</p>
</Card>

Upvotes: 3

Views: 10366

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53964

title property of Card accepts ReactNode, therefore you can render any react component in particular its style:

import { Card, Typography } from 'antd';

const { Title } = Typography;

const App = () => (
  <Card title={<Title level={2}>Custom Title</Title>}>
    <p>Card Content</p>
  </Card>
);

title- Card title - string|ReactNode

Edit react-antd-styled-template

Upvotes: 5

Related Questions