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