Antd定制主题

Question

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

我按照这些配置说明生成了一个Advanced Guide -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进行更改。我目前还没有这个文件(并且创建一个文件并不是我在上面引用的页面中的说明)。

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

定制样式还需要其他步骤吗？

Answer 1

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

我完成了以下几个小步骤：

1. Seed a演示应用程序

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

1. Add antd dependency

    yarn add antd

1. 添加craco和craco-less

   yarn add @craco/craco
   yarn add craco-less

1. 添加自定义配置craco

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

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

1. 将src/App.css重命名为src/App.less，并在顶部的

中添加antd less import

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

1. Adapt 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中使用。