styled-components 怎么定制 antd 组件的样式

以 Card 组件为例说明，要使用 styled-components 定制 Ant Design 的 Card 组件样式，可以按照以下步骤进行：

1. 安装 styled-components

首先，确保你已经安装了 styled-components 和 babel-plugin-styled-components（如果需要）：

npm install styled-components
npm install --save-dev babel-plugin-styled-components

2. 引入并使用 styled-components

在你的 React 组件中，使用 styled-components 来创建自定义的 Card 组件样式。

import React from 'react';
import { Card } from 'antd';
import styled from 'styled-components';const StyledCard = styled(Card)`border-radius: 10px; /* 自定义圆角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 自定义阴影 */.ant-card-head {background-color: #f0f2f5; /* 自定义头部背景色 */}.ant-card-body {padding: 24px; /* 自定义内容区域的内边距 */}
`;const App = () => (<StyledCard title="自定义卡片标题">自定义卡片内容</StyledCard>
);export default App;

3. 结合 ConfigProvider 进行全局定制

如果需要更大范围的主题定制，可以通过 ConfigProvider 提供的 theme 属性进行全局配置。

import React from 'react';
import { ConfigProvider, Card } from 'antd';
import styled from 'styled-components';const customTheme = {token: {colorPrimary: '#1DA57A', // 自定义主色borderRadius: '10px', // 自定义全局圆角},
};const StyledCard = styled(Card)`.ant-card-head {background-color: #f0f2f5;}.ant-card-body {padding: 24px;}
`;const App = () => (<ConfigProvider theme={customTheme}><StyledCard title="自定义卡片标题">自定义卡片内容</StyledCard></ConfigProvider>
);export default App;

通过以上步骤，你可以使用 styled-components 来定制 Ant Design 的 Card 组件样式。这样不仅可以覆盖默认样式，还能结合 ConfigProvider 实现更灵活的全局主题定制[1][2][3][4][5]。

Citations:
[1] https://blog.csdn.net/nico2333/article/details/104217852
[2] https://ant.design/docs/react/customize-theme-cn/
[3] https://ant.design/components/card-cn/
[4] https://blog.csdn.net/chunlijian1152/article/details/100974699
[5] https://juejin.cn/post/7263871284010303546