Antd 自定义主题答案

【问题标题】：Antd Customise ThemeAntd 自定义主题
【发布时间】：2020-07-27 02:47:01
【问题描述】：

我正在尝试在我的 react 应用中自定义 AntD 变量的样式。

我遵循了这些Advanced Guide 说明并生成了一个 config-overrides.js 文件，其中包含：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');


   module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { 
          '@primary-color': '#bf1650', 
          '@link-color': '#1890ff',
          '@success-color': '#52c41a',
          '@warning-color': '#faad14',
          '@error-color': '#f5222d', 
          '@font-size-base': '14px', 
          '@heading-color': 'rgba(0, 0, 0, 0.85)', 
          '@text-color': 'rgba(0, 0, 0, 0.65)', 
          '@text-color-secondary': 'rgba(0, 0, 0, .45)', 
          '@disabled-color': 'rgba(0, 0, 0, .25)', 
          '@border-radius-base': '4px',
          '@border-color-base': '#d9d9d9',
          '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)'
        },

        }),
  );

我还看到了来自 antd 的 this instruction sheet - 这需要更改 webpack.config.js。我目前没有那个文件（并且制作一个不是我上面引用的页面的说明）。

我将上述变量中的原色更改为红色以检查它是否有效。我在控制台中没有收到任何错误，但原色仍然是蓝色。

是否需要任何其他步骤来自定义样式？

【问题讨论】：

标签： css reactjs less antd

【解决方案1】：

antd 文档中 Advanced Guides 章节 Customize-Theme 中的示例对我来说效果很好。

我做了以下小步骤：

播种演示应用

    yarn create react-app antd-demo
    cd antd-demo

添加antd依赖

    yarn add antd

添加craco & craco-less

   yarn add @craco/craco
   yarn add craco-less

添加自定义配置 craco

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

将src/App.css重命名为src/App.less并在顶部添加antdless import

   @import '~antd/dist/antd.less';

适应src/App.js

import React from 'react';
import { Button } from 'antd';
import './App.less';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

在customize-theme 章节中也可以找到其他一些示例，例如在customized webpack config 中使用。

【讨论】：