关于react.js:Ant-Design-Pro配置

不论是前端框架，还是后端框架，大多数状况下，咱们只想批改一些根本配置后，就能疾速依据本人的业务需要进行开发我的项目。这也是咱们违心应用一些优良框架的起因。

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

1、defaultSetting.js 配置

地位：/config/defaultSetting.js

const proSettings = {  navTheme: 'dark',  // 黎明蓝  primaryColor: '#1890ff',  layout: 'side',  contentWidth: 'Fluid',  fixedHeader: false,  fixSiderbar: true,  colorWeak: false,  menu: {    locale: true,  },  title: 'Ant Design Pro',  pwa: false,  iconfontUrl: '',};export default proSettings;

navTheme

导航的主题，可选值为：'light' | 'dark'，其成果别离为：

primaryColor

主题色，默认为：黎明蓝（#1890ff），咱们能够更换主题色，比方：（#722ED1），其效果图如下：

如果咱们想更换其它色彩，请参考 Ant Design 色调。传送门

layout

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

contentWidth

layout 的内容模式，Fluid：自适应，Fixed：定宽 1200px，其效果图别离为：

留神：contentWidth 只有在 layout:"top" 或者 layout:"mix" 状况下失效

fixedHeader

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

fixSiderbar

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

colorWeak

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

title

零碎的左上角的零碎名称

pwa

是否开启 pwa 模式

iconfontUrl

应用 IconFont 的图标配置

除了上述默认配置，咱们还能够增加更多。
比方，将侧边菜单宽度设置为：300px，即：siderWidth:300 传送门

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

2、ProLayout 配置

地位：/src/layouts/BasicLayout.js

    <ProLayout      logo={logo}      {...props}      {...settings}      onCollapse={handleMenuCollapse}      onMenuHeaderClick={() => history.push('/')}      menuItemRender={(menuItemProps, defaultDom) => {        if (          menuItemProps.isUrl ||          !menuItemProps.path ||          location.pathname === menuItemProps.path        ) {          return defaultDom;        }        return <Link to={menuItemProps.path}>{defaultDom}</Link>;      }}      breadcrumbRender={(routers = []) => [        {          path: '/',          breadcrumbName: '首页',        },        ...routers,      ]}      itemRender={(route, params, routes, paths) => {        const first = routes.indexOf(route) === 0;        return first ? (          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>        ) : (          <span>{route.breadcrumbName}</span>        );      }}       footerRender={() => {        if (settings.footerRender || settings.footerRender === undefined) {          return defaultFooterDom;        }        return null;      }}      menuDataRender={menuDataRender}      rightContentRender={() => <RightContent />}      postMenuData={(menuData) => {        menuDataRef.current = menuData || [];        return menuData || [];      }}      waterMarkProps={{        content: 'Ant Design Pro',        fontColor: 'rgba(24,144,255,0.15)',      }}    >      <Authorized authority={authorized.authority} noMatch={noMatch}>        {children}      </Authorized>    </ProLayout>

在这里，咱们能够更改零碎的题目、logo、菜单款式、布局等等。因为这里 ProLayout 为 Ant Design 的重型组件。咱们会在后续章节有更具体的解说。