refactor(Navbar): 解决开发时 reload 之后被原有样式覆盖

miaoxing · May 21, 2021 · 1a411dc · 1a411dc
1 parent 9e06862
commit 1a411dc
Showing 1 changed file with 8 additions and 10 deletions.
diff --git a/components/Navbar.js b/components/Navbar.js
@@ -5,9 +5,8 @@ import $ from 'miaoxing';
 import {Layout, Avatar, Menu, Dropdown} from 'antd';
 import {DownOutlined} from '@ant-design/icons';
 import {Link} from '@mxjs/router';
-import {Box} from '@mxjs/box';
 import {Actions} from '@mxjs/actions';
-import {floatRight} from '@mxjs/css';
+import {css, floatRight} from '@mxjs/css';
 import {LockOutlined, LogoutOutlined} from '@ant-design/icons';
 import propTypes from 'prop-types';
 
@@ -18,27 +17,26 @@ export default class extends React.Component {
 
   static propTypes = {
     user: propTypes.object,
-  }
+  };
 
   handleLogout = async () => {
     const ret = await api.post('logout');
     await $.ret(ret);
     if (ret.isSuc()) {
       history.push($.url('admin/login', {next: window.location.pathname}));
     }
-  }
+  };
 
   render() {
     const {user} = this.props;
 
     return (
-      <Box
-        as={Layout.Header}
-        bg="white"
-        sx={{
+      <Layout.Header
+        css={css({
+          bg: 'white !important', /* 开发时，避免 reload 之后被原有样式覆盖 */
           boxShadow: 'sm',
           zIndex: 1,
-        }}
+        })}
       >
         <Dropdown
           css={floatRight()}
@@ -67,7 +65,7 @@ export default class extends React.Component {
             </Actions>
           </a>
         </Dropdown>
-      </Box>
+      </Layout.Header>
     );
   }
 }