不管是前端框架，还是后端框架，大多数情况下，我们只想修改一些基本配置后，就能快速根据自己的业务需求进行开发项目。这也是我们愿意使用一些优秀框架的原因。

在 Ant Design Pro 中，调整配置的地方不止一处，都有哪些呢？一起来看看吧。

1、defaultSetting.js 配置

位置：/config/defaultSetting.js

  1. const proSettings = {
  2.   navTheme: 'dark',
  3.   // 拂晓蓝
  4.   primaryColor: '#1890ff',
  5.   layout: 'side',
  6.   contentWidth: 'Fluid',
  7.   fixedHeader: false,
  8.   fixSiderbar: true,
  9.   colorWeak: false,
  10.   menu: {
  11.     locale: true,
  12.   },
  13.   title: 'Ant Design Pro',
  14.   pwa: false,
  15.   iconfontUrl: '',
  16. };
  17. export default proSettings;

navTheme

导航的主题，可选值为：’light’ | ‘dark’，其效果分别为：
image.png
image.png

primaryColor

主题色，默认为：拂晓蓝（#1890ff），我们可以更换主题色，比如：（#722ED1），其效果图如下：
image.png
如果我们想更换其它颜色，请参考 Ant Design 色彩。传送门

layout

layout 的菜单模式，side：右侧导航，top：顶部导航，mix：混合导航，其效果图分别为：
image.png
image.png

contentWidth

layout 的内容模式，Fluid：自适应，Fixed：定宽 1200px，其效果图分别为：
image.png
image.png
注意：contentWidth 只有在 layout:”top” 或者 layout:”mix” 情况下生效

fixedHeader

是否固定 header 到顶部，默认为：false

fixSiderbar

是否固定导航，默认为：false

colorWeak

是否开启色弱模式，默认为：false。开启后，其效果图如下：
image.png

menu

menu 的配置项，默认 { locale:true }

title

系统的左上角 的 系统名称

pwa

是否开启 pwa 模式

iconfontUrl

使用 IconFont 的图标配置

除了上述默认配置，我们还可以添加更多。
比如，将侧边菜单宽度设置为：300px，即：siderWidth:300 传送门

如果我们想自定义动态配置时，defaultSetting 配置显然满足不了我们的需求了，那该去哪里配置呢？
此时，ProLayout 重型组件该出场了。

2、ProLayout 配置

位置：/src/layouts/BasicLayout.js

  1.     <ProLayout
  2.       logo={logo}
  3.       {...props}
  4.       {...settings}
  5.       onCollapse={handleMenuCollapse}
  6.       onMenuHeaderClick={() => history.push('/')}
  7.       menuItemRender={(menuItemProps, defaultDom) => {
  8.         if (
  9.           menuItemProps.isUrl ||
  10.           !menuItemProps.path ||
  11.           location.pathname === menuItemProps.path
  12.         ) {
  13.           return defaultDom;
  14.         }
  16.         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
  17.       }}
  18.       breadcrumbRender={(routers = []) => [
  19.         {
  20.           path: '/',
  21.           breadcrumbName: '首页',
  22.         },
  23.         ...routers,
  24.       ]}
  25.       itemRender={(route, params, routes, paths) => {
  26.         const first = routes.indexOf(route) === 0;
  27.         return first ? (
  28.           <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
  29.         ) : (
  30.           <span>{route.breadcrumbName}</span>
  31.         );
  32.       }} 
  33.       footerRender={() => {
  34.         if (settings.footerRender || settings.footerRender === undefined) {
  35.           return defaultFooterDom;
  36.         }
  37.         return null;
  38.       }}
  39.       menuDataRender={menuDataRender}
  40.       rightContentRender={() => <RightContent />}
  41.       postMenuData={(menuData) => {
  42.         menuDataRef.current = menuData || [];
  43.         return menuData || [];
  44.       }}
  45.       waterMarkProps={{
  46.         content: 'Ant Design Pro',
  47.         fontColor: 'rgba(24,144,255,0.15)',
  48.       }}
  49.     >
  50.       <Authorized authority={authorized.authority} noMatch={noMatch}>
  51.         {children}
  52.       </Authorized>
  53.     </ProLayout>

在这里，我们可以更改系统的标题、logo、菜单样式、布局等等。由于这里 ProLayout 为 Ant Design 的重型组件。我们会在后续章节有更详细的讲解。