自定义主题

使用 Ant Design 可以自定义主题，使用 less 样式表并覆盖自带的样式变量即可。在您自己的代码中，也可以使用这些变量。

如需自定义主题，则需要对生成的 app 做一些修改。

在 less 中，您需要启用废弃的 inline JavaScript，因为 Antd 重度依赖这个功能。查看废弃的原因。

安装需要的依赖。注意，我们使用 react-app-rewired 来修改 webpack 的配置，这样就不需要 eject。
```
npm i react-app-rewired less less-loader customize-cra babel-plugin-import --save-dev
```

在 App 根目录创建 config-overrides.js 文件，内容如下：

const {addLessLoader, override, fixBabelImports} = require("customize-cra");
const path = require('path');
module.exports = override(
  fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      'overrideTheme': `true; @import "${path.resolve(__dirname, './src/theme.less')}";`,
    },
  }),
);

然后在 src/theme.less 内添加自己想覆盖的内容：

@primary-color: #1DA57A;

在您的代码中也可以使用 Antd 的变量：

@import "~antd/es/style/themes/default";
body {
  background: @list-header-background;
}

参阅：

Ant Design 网页上详细的文档

CSS 方法论

生成的客户端代码和 CUBA React UI 都遵循 RSCSS 方法论。另外，我们也从 SMACSS 方法论借鉴基本规则。