mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-10 11:03:19 +08:00
93dd93bf45
* chore: 4.17.0 changelog * chore: Update emoji * docs: Update changelog * docs: dynamic theme ref * chore: bump version * docs: Update content * docs: Add ref * docs: Add rc changelog * chore: bump version * test: Update snapshot
75 lines
1.7 KiB
Markdown
75 lines
1.7 KiB
Markdown
---
|
||
order: 7.1
|
||
title: 动态主题（实验性）
|
||
---
|
||
|
||
除了 [less 定制主题外](/docs/react/customize-theme) 外，我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) 进行体验。
|
||
|
||
## 注意事项
|
||
|
||
该功能通过动态修改 CSS Variable 实现，因而在 IE 中页面将无法正常展示。请先确认你的用户环境是否需要支持 IE。
|
||
|
||
## 如何使用
|
||
|
||
### 引入 antd.variable.min.css
|
||
|
||
替换当前项目引入样式文件为 CSS Variable 版本：
|
||
|
||
```diff
|
||
-- import 'antd/dist/antd.min.css';
|
||
++ import 'antd/dist/antd.variable.min.css';
|
||
```
|
||
|
||
注：如果你使用了 `babel-plugin-import`，需要将其去除。
|
||
|
||
### 静态方法配置
|
||
|
||
调用 ConfigProvider 配置方法设置主题色：
|
||
|
||
```ts
|
||
import { ConfigProvider } from 'antd';
|
||
|
||
ConfigProvider.config({
|
||
theme: {
|
||
primaryColor: '#25b864',
|
||
},
|
||
});
|
||
```
|
||
|
||
## 冲突解决
|
||
|
||
默认情况下，CSS Variable 会以 `--ant` 作为前缀。当你的项目中引用多份 css 文件时，可以通过修改前缀的方式避免冲突。
|
||
|
||
### 代码调整
|
||
|
||
通过 ConfigProvider 在顶层修改 `prefixCls`：
|
||
|
||
```tsx
|
||
import { ConfigProvider } from 'antd';
|
||
|
||
export default () => (
|
||
<ConfigProvider prefixCls="custom">
|
||
<MyApp />
|
||
</ConfigProvider>
|
||
);
|
||
```
|
||
|
||
通过静态方法设置主题色以及对应 `prefixCls`：
|
||
|
||
```ts
|
||
ConfigProvider.config({
|
||
prefixCls: 'custom',
|
||
theme: {
|
||
primaryColor: '#25b864',
|
||
},
|
||
});
|
||
```
|
||
|
||
### 编译 less
|
||
|
||
由于前缀变更，你需要重新生成一份对应的 css 文件。
|
||
|
||
```bash
|
||
lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css
|
||
```
|