更换主题

我们基于 Ant Design 视觉风格搭建了 Ant Design Pro，这套风格经过设计师的精心调配，适合大多数中后台项目。如果对视觉风格有额外的要求，推荐使用以下的方式进行定制。

主题定制

我们基于 Ant Design React 进行开发，完全支持官方提供的 less 变量定制功能. 你可以在脚手架目录中找到 config/config.js 代码类似这样:

  1. ...
  2. theme: {
  3.   'font-size-base': '14px',
  4.   'badge-font-size': '12px',
  5.   'btn-font-size-lg': '@font-size-base',
  6.   'menu-dark-bg': '#00182E',
  7.   'menu-dark-submenu-bg': '#000B14',
  8.   'layout-sider-background': '#00182E',
  9.   'layout-body-background': '#f0f2f5',
  10. };
  11. ...

Find the variables that need to be modified in All Variables Table, and start npm start after modification. , you can see the effect in your app interface.

更多方式可以参考官方文档：定制主题。

样式覆盖

Ant Design 的通用样式变量可能无法满足所有定制需求，你需要全局覆盖默认的组件样式。我们可以参照 样式 章节来覆盖样式。

全局覆盖组件

比如在 src/global.less 里修改所有标签的字体大小。

  1. // src/index.less
  2. :global {
  3.   .ant-tag {
  4.     font-size: 12px;
  5.   }
  6. }

单独覆盖指定组件

  1. // sample.less
  2. .customTag {
  3.   font-size: 18px;
  4. }
  1. import styles from './sample.less';
  3. ...
  5. return <Tag className={styles.customTag}>定制标签</Tag>;

我们不推荐进行样式覆盖，一是默认主题和组件是经过了设计师精心调节，强行覆盖可能会影响整体效果；二是覆盖代码可能因为组件库版本升级而失效。

在线切换主题

pro 中提供了一个可以在线切换主题和布局的 设置抽屉，使用这个抽屉可以很方便的查看更换主题的效果，无需重启脚手架。

为了方便预览，设置中的配置项会被保存在地址栏中，你可以将其拷贝给他人，分享效果。

由于 react-router 的特性，地址栏的参数可能被清空。

您一旦确定了这个配置，可以点击 拷贝代码 按钮将其拷贝，并在 src/defaultSetting.js 中覆盖默认设置。这样您可以将该主题发布和部署。

src/defaultSetting.js 内容如下：

  1. module.exports = {
  2.   navTheme: 'dark', // 菜单的主题
  3.   primaryColor: '#1890FF', // Ant Design 的主色调
  4.   layout: 'sidemenu', // 菜单的布局，值为 sidemenu 菜单显示在左侧，值为 topmenu 菜单显示在顶部
  5.   contentWidth: 'Fluid', // 内容的布局 Fixed 为定宽到1200px ，Fluid 为流式布局。
  6.   fixedHeader: false, // 固定页头
  7.   autoHideHeader: false, // 下滑时自动隐藏页头
  8.   fixSiderbar: false, // 固定菜单
  9. };

在线修改颜色使用的是 less 在线编译，建议在 config/config.js 中配置，提升用户体验。在线编译 less 需要时间，并且会造成卡顿。