如何为 React 应用程序应用 antd 黑暗主题?

Question

我想在我的新反应网络应用程序中使用这个深色主题：https://github.com/ant-design/ant-design-dark-theme

按照此处自定义主题的说明以及在此处自述文件中应用主题的说明进行操作后.js我的配置覆盖如下所示：

const { darkTheme } = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: darkTheme
}),
);

这似乎不起作用。例如，我有一个 Menu antd 组件仍然显示在"浅色"主题而不是"深色"主题中。

我想让我所有的antd组件都用深色主题渲染，而无需我明确设置它。这可能吗？如果是，我做错了什么？

这里不是前端开发人员，所以如果我错过了一些明显的东西，请告诉我。

Answer 1

对我有用的解决方案是@JoseFelix和@Anujs答案的组合。谢谢两位的回答：

const darkTheme = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: darkTheme.default
}),
);

Answer 2

如果控制台日志darkTheme已导入的变量，则所有样式变量都存在于darkTheme.default对象中。我已经实施了他们的aliyum-theme.

因此，要使代码正常工作，您需要将文件中modifyVars更改为config-overrides.js

const { darkTheme } = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {...darkTheme.default}
}),
);

专业提示：要在应用程序中覆盖 darkTheme，您可以创建自己的 javascript 文件并将其导入config-overrides.js文件中并在modifyVars中解构

Answer 3

当默认导出是具有变量的对象时，代码正在解构默认导出。因此，它应该是：

const darkTheme = require('@ant-design/dark-theme').default;
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: darkTheme
}),
);

Answer 4

以前的答案对我不起作用。如果它对其他人有帮助，这就是对我有用的。我认为这是由于新的更少加载程序版本和/或 antd 打包方式的变化(我真的不确定(。

const { getThemeVariables } = require("antd/dist/theme");
const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {
...getThemeVariables({
dark: true,
compact: true,  // optional
}),
},
},
})
);

Answer 5

https://www.npmjs.com/package/antd-theme

app.jsx

import { Button, Select } from 'antd';
import { ThemeProvider, useTheme } from 'antd-theme';
import React from 'react';
import ReactDOM from 'react-dom';
import { SketchPicker } from 'react-color';
const initialTheme = {
name: 'default',
variables: { 'primary-color': '#00ff00' },
};
const ThemeSelect = () => {
const [{ name, variables, themes }, setTheme] = useTheme();
return (
<>
<Select
style={{ width: 100 }}
value={name}
onChange={
(theme) => setTheme({ name: theme, variables })
}
>
{
themes.map(
({ name }) => (
<Select.Option key={name} value={name}>
{name}
</Select.Option>
)
)
}
</Select>
<SketchPicker
color={variables['primary-color']}
onChange={(value) => {
// Will update all css attributes affected by primary-color
setTheme({ name, variables: { 'primary-color': value.hex } });
}}
/>
</>
);
};
const App = () => {
const [theme, setTheme] = React.useState(initialTheme);
return (
<ThemeProvider
theme={theme}
onChange={(value) => setTheme(value)}
>
<ThemeSelect />
<Button type="primary">Button</Button>
</ThemeProvider>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

对于那些使用react-app-rewire-less和customize-cra的人，可以像这样启用javascript。

配置覆盖.js

const { override, fixBabelImports, addLessLoader, addPostcssPlugins, adjustStyleLoaders, addWebpackPlugin } = require('customize-cra');
const AntdThemePlugin = require('antd-theme/plugin');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
}),
adjustStyleLoaders(
(loaders) => {
loaders.use[0] = {
loader: AntdThemePlugin.loader
}
}
),
addWebpackPlugin(
new AntdThemePlugin({
themes: [
{
name: 'dark',
filename: require.resolve('antd/lib/style/themes/dark.less'),
},
{
name: 'compact',
filename: require.resolve('antd/lib/style/themes/compact.less'),
},
],
})
),
);

Answer 6

> 2023 - 蚂蚁设计V5 Suuuuuper 简单的实现，适合任何查看 V5 的人。

这是NextJS而不是React，但你得到的只是：

import { ConfigProvider, theme } from 'antd';
import '../styles/globals.css';
import 'antd/dist/reset.css';
export default function App({ Component, pageProps }) {
return (
<ConfigProvider
theme={{
token: {
// any theme overirdes
colorPrimary: '#7f00ff',
},
// this line sets it to dark mode
algorithm: theme.darkAlgorithm,
}}
>
<Component {...pageProps} />
</ConfigProvider>
);
}

https://ant.design/docs/react/customize-theme#use-preset-algorithms