主题定制 #

概述 #

Ant Design 5.x 使用 CSS-in-JS 技术和 Design Token 系统，提供了强大的主题定制能力。通过 ConfigProvider 组件可以轻松实现主题定制。

基础用法 #

修改主题色 #

tsx

import { ConfigProvider, Button } from 'antd';

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#00b96b',
    },
  }}
>
  <Button type="primary">主题按钮</Button>
</ConfigProvider>

修改圆角 #

tsx

import { ConfigProvider, Button, Input } from 'antd';

<ConfigProvider
  theme={{
    token: {
      borderRadius: 4,
    },
  }}
>
  <Button type="primary">按钮</Button>
  <Input placeholder="输入框" />
</ConfigProvider>

Design Token #

全局 Token #

tsx

import { ConfigProvider } from 'antd';

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#1677ff',
      colorSuccess: '#52c41a',
      colorWarning: '#faad14',
      colorError: '#ff4d4f',
      colorInfo: '#1677ff',
      borderRadius: 6,
      fontSize: 14,
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
    },
  }}
>
  <App />
</ConfigProvider>

常用 Token #

Token	说明	默认值
colorPrimary	品牌色	#1677ff
colorSuccess	成功色	#52c41a
colorWarning	警告色	#faad14
colorError	错误色	#ff4d4f
colorInfo	信息色	#1677ff
borderRadius	圆角	6
fontSize	字号	14
fontFamily	字体	-
lineHeight	行高	1.5714
controlHeight	控件高度	32

组件级别定制 #

单个组件定制 #

tsx

import { ConfigProvider, Button, Input } from 'antd';

<ConfigProvider
  theme={{
    components: {
      Button: {
        colorPrimary: '#00b96b',
        algorithm: true,
      },
      Input: {
        colorPrimary: '#eb2f96',
      },
    },
  }}
>
  <Button type="primary">绿色按钮</Button>
  <Input />
</ConfigProvider>

组件 Token #

tsx

import { ConfigProvider, Button } from 'antd';

<ConfigProvider
  theme={{
    components: {
      Button: {
        fontWeight: 600,
        paddingInline: 24,
        controlHeight: 40,
      },
    },
  }}
>
  <Button type="primary">自定义按钮</Button>
</ConfigProvider>

预设算法 #

暗色主题 #

tsx

import { ConfigProvider, theme } from 'antd';

<ConfigProvider
  theme={{
    algorithm: theme.darkAlgorithm,
  }}
>
  <App />
</ConfigProvider>

紧凑主题 #

tsx

import { ConfigProvider, theme } from 'antd';

<ConfigProvider
  theme={{
    algorithm: theme.compactAlgorithm,
  }}
>
  <App />
</ConfigProvider>

组合算法 #

tsx

import { ConfigProvider, theme } from 'antd';

<ConfigProvider
  theme={{
    algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
  }}
>
  <App />
</ConfigProvider>

动态主题 #

tsx

import { ConfigProvider, Button, Space } from 'antd';
import { useState } from 'react';

const App = () => {
  const [primaryColor, setPrimaryColor] = useState('#1677ff');

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: primaryColor,
        },
      }}
    >
      <Space>
        <Button type="primary">主题按钮</Button>
        <Button onClick={() => setPrimaryColor('#00b96b')}>绿色</Button>
        <Button onClick={() => setPrimaryColor('#eb2f96')}>粉色</Button>
      </Space>
    </ConfigProvider>
  );
};

局部主题 #

tsx

import { ConfigProvider, Button, Card } from 'antd';

<Card title="默认主题">
  <Button type="primary">默认按钮</Button>
</Card>

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#00b96b',
    },
  }}
>
  <Card title="自定义主题">
    <Button type="primary">自定义按钮</Button>
  </Card>
</ConfigProvider>

获取主题 Token #

tsx

import { theme, Button } from 'antd';

const App = () => {
  const { token } = theme.useToken();

  return (
    <div style={{ background: token.colorPrimary }}>
      <Button>使用主题色</Button>
    </div>
  );
};

完整示例 #

tsx

import { ConfigProvider, theme, Button, Input, Card, Space } from 'antd';
import { useState } from 'react';

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 6,
        },
        components: {
          Button: {
            controlHeight: 40,
          },
          Input: {
            controlHeight: 40,
          },
        },
      }}
    >
      <Space direction="vertical">
        <Button onClick={() => setIsDark(!isDark)}>
          切换{isDark ? '亮色' : '暗色'}主题
        </Button>
        <Card title="主题示例">
          <Space direction="vertical">
            <Button type="primary">主要按钮</Button>
            <Input placeholder="输入框" />
          </Space>
        </Card>
      </Space>
    </ConfigProvider>
  );
};

API #

ConfigProvider theme #

属性	说明	类型	默认值
token	全局 Token	object	-
components	组件 Token	object	-
algorithm	主题算法	algorithm \| algorithm[]	-
inherit	是否继承父级	boolean	true

theme.useToken() #

返回 { token, hashId, theme }

预设算法 #

算法	说明
theme.defaultAlgorithm	默认算法
theme.darkAlgorithm	暗色算法
theme.compactAlgorithm	紧凑算法

最佳实践 #

1. 主题配置文件 #

tsx

import { theme } from 'antd';

export const lightTheme = {
  token: {
    colorPrimary: '#1677ff',
    colorBgContainer: '#ffffff',
  },
};

export const darkTheme = {
  algorithm: theme.darkAlgorithm,
  token: {
    colorPrimary: '#1677ff',
  },
};

2. 主题切换 #

tsx

import { ConfigProvider, theme } from 'antd';
import { useState, useEffect } from 'react';

const App = () => {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    setIsDark(savedTheme === 'dark');
  }, []);

  const toggleTheme = () => {
    const newTheme = !isDark;
    setIsDark(newTheme);
    localStorage.setItem('theme', newTheme ? 'dark' : 'light');
  };

  return (
    <ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : undefined,
      }}
    >
      <App />
    </ConfigProvider>
  );
};

下一步 #

接下来学习国际化组件！