@arcblock/ux 1.17.21 → 2.0.2

package/lib/Theme/index.js

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.create = void 0;
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 require("@fontsource/lato/400.css");
 
 require("@fontsource/lato/700.css");
 
-var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
-
 var _Colors = _interopRequireDefault(require("../Colors"));
 
 const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"];
@@ -29,8 +27,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-// https://material-ui.com/customization/default-theme/
+const muiDarkTheme = (0, _styles.createTheme)({
+  palette: {
+    mode: 'dark'
+  }
+}); // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
+
 const create = function create() {
   let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       {
@@ -42,15 +45,26 @@ const create = function create() {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  // palette 考虑 light & dark mode, dark mode 需要持续完善
+  // - 能配合 ColorModeContext 使用
+  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
+  const _palette = mode === 'light' ? Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
+    background: {
+      paper: _Colors.default.common.white,
+      default: _Colors.default.background.default
+    },
+    mode
+  }), palette || {}) : Object.assign(_objectSpread(_objectSpread({}, muiDarkTheme.palette), {}, {
+    background: {
+      paper: _Colors.default.grey[900],
+      default: _Colors.default.grey[900]
+    },
+    mode
+  }), palette || {});
+
   const theme = (0, _styles.createTheme)(_objectSpread({
     themeName: 'ArcBlock',
-    palette: Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
-      background: {
-        paper: mode === 'light' ? _Colors.default.common.white : _Colors.default.grey[900],
-        default: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
-      },
-      type: mode
-    }), palette || {}),
+    palette: _palette,
     typography: Object.assign({
       useNextVariants: true,
       color: {
@@ -72,70 +86,40 @@ const create = function create() {
         fontWeight: 700
       }
     }, typography || {}),
-    overrides: Object.assign({
+    components: _objectSpread({
       MuiButton: {
-        root: {
-          boxShadow: 'none'
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
         }
       },
       MuiButtonGroup: {
-        contained: {
-          boxShadow: 'none'
-        }
-      },
-      MuiAppBar: {
-        root: {
-          height: 80
-        }
-      },
-      MuiToolbar: {
-        root: {
-          background: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
         }
       },
       MuiTableCell: {
-        root: {
-          borderBottomWidth: '0',
-          paddingTop: '14px',
-          paddingBottom: '14px',
-          paddingLeft: 0,
-          paddingRight: '30px'
-        },
-        head: {
-          textTransform: 'uppercase',
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-        },
-        body: {
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-        }
-      },
-      MuiChip: {
-        root: {
-          padding: '3px',
-          height: '24px',
-          fontSize: '12px',
-          marginRight: '10px'
-        },
-        label: {
-          paddingLeft: '5px',
-          paddingRight: '5px',
-          marginRight: '5px'
-        }
-      },
-      MuiTooltip: {
-        tooltip: {
-          fontSize: '14px'
-        }
-      },
-      MuiTypography: {
-        body1: {
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-        },
-        body2: {
-          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+        styleOverrides: {
+          root: {
+            borderBottomWidth: '0',
+            paddingTop: '14px',
+            paddingBottom: '14px',
+            paddingLeft: 0,
+            paddingRight: '30px'
+          },
+          head: {
+            textTransform: 'uppercase',
+            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+          },
+          body: {
+            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+          }
         }
       }
-    }, overrides || {}),
+    }, overrides),
     pageWidth,
     // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
     //       可以从 Colors 模块/theme.palette/mui colors 中取值
@@ -161,7 +145,7 @@ const create = function create() {
     },
     mode
   }, rest));
-  const enhanced = (0, _responsiveFontSizes.default)(theme, {
+  const enhanced = (0, _styles.responsiveFontSizes)(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,
     factor: 3,

package/lib/Toast/index.js

@@ -9,25 +9,25 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
 
-var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
 
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
-var _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+var _Warning = _interopRequireDefault(require("@mui/icons-material/Warning"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _Snackbar = _interopRequireDefault(require("@material-ui/core/Snackbar"));
+var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
 
-var _SnackbarContent = _interopRequireDefault(require("@material-ui/core/SnackbarContent"));
+var _SnackbarContent = _interopRequireDefault(require("@mui/material/SnackbarContent"));
 
-var _colors = require("@material-ui/core/colors");
+var _colors = require("@mui/material/colors");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 
 const _excluded = ["className", "message", "onClose", "variant"];
 
@@ -93,7 +93,8 @@ function SnackbarContentWrapper(props) {
       key: "close",
       "aria-label": "close",
       color: "inherit",
-      onClick: onClose
+      onClick: onClose,
+      size: "large"
     }, /*#__PURE__*/_react.default.createElement(_Close.default, {
       className: classes.icon
     }))]

package/lib/Video/index.js

@@ -13,7 +13,7 @@ var _reactPlayer = _interopRequireDefault(require("react-player"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _Util = require("../Util");
 

package/lib/Wallet/Action.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _abtwallet = _interopRequireDefault(require("./images/abtwallet.png"));
 

package/lib/Wallet/Download.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 

package/lib/Wallet/Open.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 
-var _Fab = _interopRequireDefault(require("@material-ui/core/Fab"));
+var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/WechatPrompt/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 

package/lib/withTheme/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = require("styled-components");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var _CssBaseline = _interopRequireDefault(require("@material-ui/core/CssBaseline"));
+var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline"));
 
 var _Theme = require("../Theme");
 
@@ -48,7 +48,7 @@ function withTheme(Component) {
     }
 
     render() {
-      return /*#__PURE__*/_react.default.createElement(_styles.MuiThemeProvider, {
+      return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
         theme: this.theme
       }, /*#__PURE__*/_react.default.createElement(_CssBaseline.default, null), /*#__PURE__*/_react.default.createElement(GlobalStyle, {
         theme: this.theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.17.21",
+  "version": "2.0.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -50,17 +50,19 @@
   },
   "peerDependencies": {
     "@sentry/browser": "^5.0.8",
-    "react": ">=16.12.0",
+    "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "72ee6788c33de8033ac6fcc884554c9e2bdb0849",
+  "gitHead": "319d3e6d884b5f79311edca8aab7a9ed17a17b74",
   "dependencies": {
-    "@arcblock/icons": "^1.17.21",
-    "@arcblock/react-hooks": "^1.17.21",
+    "@arcblock/icons": "^2.0.2",
+    "@arcblock/react-hooks": "^2.0.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@fontsource/lato": "^4.5.3",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "4.11.2",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.4",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "axios": "^0.21.2",
     "base64-url": "^2.3.3",
@@ -72,7 +74,7 @@
     "is-svg": "^4.3.1",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",
-    "mdi-material-ui": "^6.22.1",
+    "mdi-material-ui": "^7.2.0",
     "react-cookie-consent": "^6.4.1",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.31.1",

package/src/ActionButton/index.js

@@ -56,7 +56,7 @@ ActionButton.defaultProps = {
   color: '',
   border: '',
   width: '',
-  theme: 'default',
+  theme: 'inherit',
   variant: 'outlined',
   size: 'large',
   children: null,

package/src/ActivityIndicator/index.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import green from '@material-ui/core/colors/green';
-import blue from '@material-ui/core/colors/blue';
+import { green, blue } from '@mui/material/colors';
 
 import Logo from '../Logo';
 import colors from '../Colors';

package/src/Alert/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Typography from '@material-ui/core/Typography';
-import blueGrey from '@material-ui/core/colors/blueGrey';
+import Typography from '@mui/material/Typography';
+import { blueGrey } from '@mui/material/colors';
 
 import Icon from '../Icon';
 import { mergeProps } from '../Util';

package/src/Async/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export default function LoadAsyncComponent(importComponent, key = 'default', showProgress = true) {
   class AsyncComponent extends React.Component {

package/src/Badge/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import colors from '../Colors';
 import { mergeProps } from '../Util';

package/src/Blocklet/blocklet.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
-import useTheme from '@material-ui/core/styles/useTheme';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@mui/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import Button from '../Button';
 import Img from '../Img';

package/src/BlockletNFT/index.js

@@ -1,11 +1,11 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Portal from '@material-ui/core/Portal';
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import useTheme from '@material-ui/core/styles/useTheme';
+import Portal from '@mui/material/Portal';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import useTheme from '@mui/styles/useTheme';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
 
 import Icon from '../Icon';
@@ -238,8 +238,8 @@ export default function BlockletNFT({
   const _onMainClick = wrapHandler(onMainClick);
 
   const theme = useTheme();
-  const isDownSm = useMediaQuery(theme.breakpoints.down('sm'));
-  const isDownMd = useMediaQuery(theme.breakpoints.down('md'));
+  const isDownSm = useMediaQuery(theme.breakpoints.down('md'));
+  const isDownMd = useMediaQuery(theme.breakpoints.down('lg'));
   const isUpLg = useMediaQuery(theme.breakpoints.up('lg'));
 
   // If size is auto, need calculate actual size according to screen size

package/src/Button/index.js

@@ -1,4 +1,4 @@
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import wrap from './wrap';
 
 export default wrap(Button);

package/src/Button/wrap.js

@@ -8,14 +8,6 @@ import colors from '../Colors';
 import { mergeProps } from '../Util';
 
 const extendedColors = {
-  danger: {
-    contained: { backgroundColor: colors.error.main, color: colors.common.white },
-    outlined: { borderColor: colors.error.main, color: colors.error.main },
-  },
-  warning: {
-    contained: { backgroundColor: colors.warning.main, color: colors.common.white },
-    outlined: { borderColor: colors.warning.main, color: colors.warning.main },
-  },
   did: {
     contained: { backgroundColor: colors.did.primary, color: colors.common.white },
     outlined: { borderColor: colors.did.primary, color: colors.did.primary },
@@ -44,8 +36,9 @@ export default function (BaseComponent) {
       default:
     }
 
-    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // mui v4 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
     // 这里扩展 danger/warning/reverse/did 四种 color
+    // !! 已升级到 mui v5, error/warning 等 color 已经默认支持, extendedColors 只扩展了 did/reverse
     const matched = extendedColors[color] && extendedColors[color][rest.variant];
     const styles = Object.assign({}, style, {
       boxShadow: 'none',

package/src/ButtonGroup/index.js

@@ -1,6 +1,6 @@
-import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ButtonGroup from '@mui/material/ButtonGroup';
 import wrap from '../Button/wrap';
 
-// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @mui/material/ButtonGroup
 // (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
 export default wrap(ButtonGroup);

package/src/ClickToCopy/index.js

@@ -3,8 +3,8 @@ import Copy from 'copy-to-clipboard';
 import PropTypes from 'prop-types';
 import useWindowSize from 'react-use/lib/useWindowSize';
 
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import styled from 'styled-components';
 
 import Toast from '../Toast';

package/src/CodeBlock/index.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Copy from 'copy-to-clipboard';
-import Button from '@material-ui/core/IconButton';
+import Button from '@mui/material/IconButton';
 import useMountedState from 'react-use/lib/useMountedState';
 
 import hljs from 'highlight.js/lib/highlight';
@@ -23,8 +23,8 @@ import plaintext from 'highlight.js/lib/languages/plaintext';
 
 import 'highlight.js/styles/atom-one-dark.css';
 
-import CopyIcon from '@material-ui/icons/FileCopy';
-import CheckIcon from '@material-ui/icons/Check';
+import CopyIcon from '@mui/icons-material/FileCopy';
+import CheckIcon from '@mui/icons-material/Check';
 import colors from '../Colors';
 
 hljs.registerLanguage('javascript', javascript);

package/src/ContactForm/index.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import axios from 'axios';
 
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
 import Button from '../Button';
@@ -116,7 +116,7 @@ export default class ContactForm extends React.Component {
           <Button
             variant="outlined"
             type="submit"
-            color="default"
+            color="inherit"
             size="large"
             disabled={loading}
             className="subscribe-btn-empty">

package/src/CookieConsent/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
 
 export { resetCookieConsentValue };
@@ -19,6 +19,8 @@ const translations = {
   },
 };
 
+const AcceptButton = props => <Button variant="contained" {...props} />;
+
 /**
  * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
  * - 默认内容
@@ -34,9 +36,8 @@ export default function DefaultCookieConsent({ children, locale, style, ...rest
       <CookieConsent
         disableStyles
         disableButtonStyles
-        ButtonComponent={Button}
+        ButtonComponent={AcceptButton}
         buttonText={translations[locale].agree}
-        buttonClasses="MuiButton-contained MuiButton-containedPrimary"
         buttonStyle={{ marginTop: 16, padding: '6px 16px' }}
         {...rest}>
         {children || <p style={{ margin: 0 }}>{translations[locale].content}</p>}

package/src/Dialog/dialog.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import MuiDialog from '@material-ui/core/Dialog';
-import MuiDialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import IconButton from '@material-ui/core/IconButton';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { useTheme } from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
+import MuiDialog from '@mui/material/Dialog';
+import MuiDialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/styles';
+import CloseIcon from '@mui/icons-material/Close';
 
 /**
  * Dialog
@@ -29,7 +29,7 @@ const Dialog = ({
 }) => {
   const theme = useTheme();
   // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const showHeader = title || showCloseButton || toolbar;
   const handleOnClose = (e, reason) => {
     // escapeKeyDown/backdropClick
@@ -48,7 +48,10 @@ const Dialog = ({
   );
 
   const closeButton = (
-    <IconButton className="ux-dialog_closeButton" onClick={e => handleOnClose(e, 'closeButton')}>
+    <IconButton
+      className="ux-dialog_closeButton"
+      onClick={e => handleOnClose(e, 'closeButton')}
+      size="large">
       <CloseIcon />
     </IconButton>
   );

package/src/Footer/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import { mergeProps } from '../Util';
 import Logo from '../Logo';

package/src/Header/header.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Box from '@material-ui/core/Box';
-import Container from '@material-ui/core/Container';
-import useTheme from '@material-ui/core/styles/useTheme';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import useTheme from '@mui/styles/useTheme';
 
 /**
  * Header 组件
@@ -128,7 +128,7 @@ const Root = styled.div`
     display: flex;
     align-items: center;
   }
-  ${props => props.$theme.breakpoints.down('md')} {
+  ${props => props.$theme.breakpoints.down('lg')} {
     .header-brand {
       margin-right: 12px;
       .header-brand-title {
@@ -138,7 +138,7 @@ const Root = styled.div`
       }
     }
   }
-  ${props => props.$theme.breakpoints.down('sm')} {
+  ${props => props.$theme.breakpoints.down('md')} {
     .header-container {
       height: 56px;
     }