Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

368
Vistas
How to customize the title of a card in antd

in a react app how can I change the size and the font of the title of a antd card?

<Card title="Title" style={{ width: 300 }}>
  <p>Card content</p>
  <p>Card content</p>
  <p>Card content</p>
</Card>
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Antd has externized most of their styling variable in LESS variables

as you can see in

https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

To be able to overwrite those variables you need to use modifyVar function from LESS

You can check more about theme updates here: https://ant.design/docs/react/customize-theme

So to your question you can check -
@card-head-font-size: @font-size-lg; @card-head-font-size-sm: @font-size-base

about 4 years ago · Juan Pablo Isaza Denunciar

0

For example changing the font-size and font-family of the title using styled-components you can override the class like so:

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Card } from 'antd';
import styled from 'styled-components';

const StyledCard = styled(Card)`
  .ant-card-head-title {
    font-size: 10px;
    font-family: cursive;
  }
`;

ReactDOM.render(
  <>
    <StyledCard title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </StyledCard>
  </>,
  document.getElementById('container'),
);

According to the docs,
You can also provide a ReactNode for the title prop, and style it as you want.

You also can check this sandBox:
https://codesandbox.io/s/basic-card-antd-4-18-5-forked-hfdnm?file=/index.js

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda