v0.7.1

examples/react-ts-demo/src/App.tsx

@@ -10,6 +10,7 @@ import TableComp from './components/TableComp';
 import TableSelectComp from './components/TableSelectComp';
 import MenuComp from './components/MenuComp';
 import RadioComp from './components/RadioComp';
+import LayoutComp from './components/LayoutComp';
 
 const { Step } = Steps;
 
@@ -48,7 +49,7 @@ function App() {
   };
 
   return (
-    <div className="App">
+    <div className="App" style={{ paddingBottom: 20 }}>
       <Steps current={1}>
         <Step title="Finished" description="This is a description." />
         <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />

examples/react-ts-demo/src/components/LayoutComp.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Layout, Menu } from 'antd';
+import {
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  UserOutlined,
+  VideoCameraOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+
+const { Header, Sider, Content } = Layout;
+
+class LayoutComp extends React.Component {
+  state = {
+    collapsed: false,
+  };
+
+  toggle = () => {
+    this.setState({
+      collapsed: !this.state.collapsed,
+    });
+  };
+
+  render() {
+    return (
+      <Layout>
+        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
+          <div className="logo" />
+          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
+            <Menu.Item key="1" icon={<UserOutlined />}>
+              nav 1
+            </Menu.Item>
+            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
+              nav 2
+            </Menu.Item>
+            <Menu.Item key="3" icon={<UploadOutlined />}>
+              nav 3
+            </Menu.Item>
+          </Menu>
+        </Sider>
+        <Layout className="site-layout">
+          <Header className="site-layout-background" style={{ padding: 0 }}>
+            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+              className: 'trigger',
+              onClick: this.toggle,
+            })}
+          </Header>
+          <Content
+            className="site-layout-background"
+            style={{
+              margin: '24px 16px',
+              padding: 24,
+              minHeight: 280,
+            }}
+          >
+            Content
+          </Content>
+        </Layout>
+      </Layout>
+    );
+  }
+};
+
+export default LayoutComp;

examples/react-ts-demo/src/components/MenuComp.tsx

@@ -26,14 +26,14 @@ class App extends React.Component {
   render() {
     return (
       <div style={{ width: 600 }}>
-        <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
+        <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }} ghost>
           {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
         </Button>
         <Menu
           defaultSelectedKeys={['1']}
           defaultOpenKeys={['sub1']}
           mode="horizontal"
-          theme="dark"
+          // theme="dark"
           inlineCollapsed={this.state.collapsed}
         >
           <Menu.Item key="1" icon={<PieChartOutlined />}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-antd-theme",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Dynamic change ant-design theme by simpley method.",
   "main": "lib/index.js",
   "types": "index.d.ts",

src/core/theme.css

@@ -307,6 +307,10 @@ input 相关 */
   background-color: var(--primary-color);
   color: #fff;
 }
+.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
 /*
 Dropdown组件*/
 .ant-dropdown-menu-item-selected,