Ant Design 更改主题

更改主题

通过 ConfigProvider 设置主题

切换内置主题：默认有三个内置主题(defaultAlgorithm，darkAlgorithm， compactAlgorithm)

xxxxxxxxxx
<ConfigProvider locale={ zhCN } theme={{ algorithm:theme.darkAlgorithm }}>
    <App />
</ConfigProvider>

配置主题（修改主题变量）

xxxxxxxxxx
<ConfigProvider locale={ zhCN } theme={{token:{ colorPrimary:"#00b96b" }}}>
    <App />
</ConfigProvider>

使用 Design Token

如果你希望使用当前主题下的 Design Token，我们提供了 useToken 这个 hook来获取 Design Token

xxxxxxxxxx
import { DatePicker, Button, Space, theme } from 'antd';

function App() {
  const { token } = theme.useToken()
  return (
    <div className="App">
      <DatePicker />
      <Space wrap>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
      </Space>
      <div style={{ color: token.colorPrimary }}>hello,itbaizhan</div>
    </div>
  );
}
export default App;

实时效果反馈

1. 在React Antd 中，获取 Design Token 的 Hook 方法是:

A useState

B useEffect

C useToken

D useHook

答案

1=>C