fix bug: cannot set light theme correctly

src/components/SiderMenu/SiderMenu.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { Layout, Menu, Icon } from 'antd';
 import pathToRegexp from 'path-to-regexp';
 import { Link } from 'dva/router';
+import classNames from 'classnames';
 import styles from './index.less';
 import { urlToList } from '../_utils/pathTools';
 
@@ -75,8 +76,7 @@ export default class SiderMenu extends PureComponent {
   getDefaultCollapsedSubMenus(props) {
     const {
       location: { pathname },
-    } =
-      props || this.props;
+    } = props || this.props;
     return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
   }
 
@@ -212,6 +212,10 @@ export default class SiderMenu extends PureComponent {
   render() {
     const { logo, menuData, collapsed, onCollapse } = this.props;
     const { openKeys } = this.state;
+    const theme = 'dark';
+    const siderClass = classNames(styles.sider, {
+      [styles.light]: theme === 'light',
+    });
     // Don't show popup menu when it is been collapsed
     const menuProps = collapsed
       ? {}
@@ -231,7 +235,7 @@ export default class SiderMenu extends PureComponent {
         breakpoint="lg"
         onCollapse={onCollapse}
         width={256}
-        className={styles.sider}
+        className={siderClass}
       >
         <div className={styles.logo} key="logo">
           <Link to="/">
@@ -241,7 +245,7 @@ export default class SiderMenu extends PureComponent {
         </div>
         <Menu
           key="Menu"
-          theme="dark"
+          theme={theme}
           mode="inline"
           {...menuProps}
           onOpenChange={this.handleOpenChange}

src/components/SiderMenu/index.less

@@ -29,7 +29,7 @@
   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
   position: relative;
   z-index: 10;
-  &.ligth {
+  &.light {
     background-color: white;
     .logo {
       background: white;