🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
--- order: 14 title: 更换主题 type: 进阶 --- 我们基于 Ant Design 视觉风格搭建了 Ant Design Pro,这套风格经过设计师的精心调配,适合大多数中后台项目。如果对视觉风格有额外的要求,推荐使用以下的方式进行定制。 ## 主题定制 我们基于 Ant Design React 进行开发,完全支持官方提供的 less 变量定制功能. 你可以在脚手架目录中找到 `config/config.ts` 代码类似这样: ```js ... theme: { 'font-size-base': '14px', 'badge-font-size': '12px', 'btn-font-size-lg': '@font-size-base', 'menu-dark-bg': '#00182E', 'menu-dark-submenu-bg': '#000B14', 'layout-sider-background': '#00182E', 'layout-body-background': '#f0f2f5', }; ... ``` Find the variables that need to be modified in [All Variables Table](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less), and start `npm start` after modification. , you can see the effect in your app interface. 更多方式可以参考官方文档:[定制主题](https://ant.design/docs/react/customize-theme-cn)。 ## 样式覆盖 Ant Design 的通用样式变量可能无法满足所有定制需求,你需要全局覆盖默认的组件样式。我们可以参照 [样式](/docs/style) 章节来覆盖样式。 ### 全局覆盖组件 比如在 `src/global.less` 里修改所有标签的字体大小。 ```less // src/index.less :global { .ant-tag { font-size: 12px; } } ``` ### 单独覆盖指定组件 ```less // sample.less .customTag { font-size: 18px; } ``` ```jsx import styles from './sample.less'; ... return <Tag className={styles.customTag}>定制标签</Tag>; ``` > 我们不推荐进行样式覆盖,一是默认主题和组件是经过了设计师精心调节,强行覆盖可能会影响整体效果;二是覆盖代码可能因为组件库版本升级而失效。 ## 在线切换主题 pro 中提供了一个可以在线切换主题和布局的 设置抽屉,使用这个抽屉可以很方便的查看更换主题的效果,无需重启脚手架。 为了方便预览,设置中的配置项会被保存在地址栏中,你可以将其拷贝给他人,分享效果。 > 由于 react-router 的特性,地址栏的参数可能被清空。 您一旦确定了这个配置,可以点击 拷贝代码 按钮将其拷贝,并在 `src/defaultSetting.ts` 中覆盖默认设置。这样您可以将该主题发布和部署。 [`src/defaultSetting.ts`](https://github.com/ant-design/ant-design-pro/blob/master/src/defaultSettings.ts) 内容如下: ```js module.exports = { navTheme: 'dark', // 菜单的主题 primaryColor: '#1890FF', // Ant Design 的主色调 layout: 'sidemenu', // 菜单的布局,值为 sidemenu 菜单显示在左侧,值为 topmenu 菜单显示在顶部 contentWidth: 'Fluid', // 内容的布局 Fixed 为定宽到1200px ,Fluid 为流式布局。 fixedHeader: false, // 固定页头 autoHideHeader: false, // 下滑时自动隐藏页头 fixSiderbar: false, // 固定菜单 }; ``` > 在线修改颜色使用的是 less 在线编译,建议在 [`config/config.ts`](https://github.com/ant-design/ant-design-pro/blob/master/config/config.ts) 中配置,提升用户体验。在线编译 less 需要时间,并且会造成卡顿。