en una aplicación de reacción, ¿cómo puedo cambiar el tamaño y la fuente del título de una tarjeta antd?
<Card title="Title" style={{ width: 300 }}> <p>Card content</p> <p>Card content</p> <p>Card content</p> </Card>
Antd ha externalizado la mayor parte de su variable de estilo en MENOS variables
como puedes ver en
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
Para poder sobrescribir esas variables, debe usar la función modifyVar de LESS
Puede consultar más sobre las actualizaciones de temas aquí: https://ant.design/docs/react/customize-theme
Entonces, a su pregunta, puede verificar:
@tamaño-de-fuente-de-cabeza-de-tarjeta: @tamaño-de-fuente-lg; @card-head-font-size-sm: @fuente-tamaño-base
Por ejemplo, al cambiar el font-size font-family de fuentes del título usando styled-components puede anular la clase de esta manera:
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'), ); Según los documentos,
También puede proporcionar un ReactNode para el accesorio del título y darle el estilo que desee.
También puede consultar este sandBox:
https://codesandbox.io/s/basic-card-antd-4-18-5-forked-hfdnm?file=/index.js