在Ant Design中,可以使用ConfigProvider
组件来切换亮色或暗色主题。
首先,确保你已经安装了Ant Design和React,并且已经引入了ConfigProvider
组件和相关的样式。
以下是一个示例的代码:
import React, { useState } from 'react';
import { ConfigProvider, Switch } from 'antd';
import { SmileOutlined, MehOutlined } from '@ant-design/icons';
const App = () => {
const [darkMode, setDarkMode] = useState(false);
const changeTheme = (value) => {
setDarkMode(value);
}
return (
{darkMode ? '暗色主题' : '亮色主题'}
{darkMode ? : }
);
}
export default App;
在上面的代码中,我们使用useState
来保存当前的主题模式,使用setDarkMode
来更新主题模式。然后,我们使用ConfigProvider
组件来设置主题,根据darkMode
的值来切换亮色或暗色主题。
在页面上,我们展示了一个标题和一个图标,根据当前的主题模式来展示不同的内容。另外,我们使用了Switch
组件来切换主题模式,当切换开关时,调用changeTheme
函数来更新主题模式。
通过以上代码,你就可以在Ant Design的生产环境中切换亮色或暗色主题了。