search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.5k stars 32.17k forks source link

theme can not work #31170

Closed haoyinag closed 2 years ago

haoyinag commented 2 years ago

Duplicates

Latest version

Current behavior 😯

import defaultTheme from '@mui/material/styles/defaultTheme';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const __defaultTheme= {
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      iPad: 768,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
  spacing: 4,
  direction: 'ltr',
  palette: {
    type: 'light',
    common: {
      black: '#000',
      white: '#fff',
      dark: '#020202',
    },
    primary: {
      // main: '#6200EE',
      // main: '#2F6AEE', // 主颜色
      main: '#004CAA', // 主颜色
      medium: '#5299EA', // 主颜色-次级
      slight: '#E8EFF8', // 主颜色-轻微
      dark: '#3700B3',
      contrastText: '#fff',
    },
    secondary: {
      main: '#5299EA',
      dark: '#018786',
      contrastText: '#fff',
    },
    success: {
      light: '#D7F5B1',
      main: '#8DCD03',
      dark: '#5D9405',
    },
    info: {
      light: '#9BE7FD',
      main: '#0795F4',
      dark: '#0356AF',
    },
    warning: {
      light: '#FFDE99',
      main: '#FF8C00',
      dark: '#D36F1A',
    },
    error: {
      light: '#FFC7D1',
      lower: '#FF6767',
      medium: '#FA6E71',
      main: '#E00930',
      dark: '#87061E',
    },
    sidebar: {
      bgColor: '#fff',
      textColor: 'rgba(0, 0, 0, 0.6)',
      textDarkColor: 'rgba(0, 0, 0, 0.87)',
      textActiveColor: '#2F6AEE',
      navHoverBgColor: 'rgb(229, 229, 229)',
      navActiveBgColor: 'rgb(239, 229, 253)',
      borderColor: 'rgba(33, 33, 33, 0.08)',
    },
    horizontalNav: {
      navigationColor: 'rgba(255, 255, 255, 0.74)',
      navigationActiveColor: 'rgba(255, 255, 255, 1)',
      textColor: 'rgba(0, 0, 0, 0.6)',
      textDarkColor: 'rgba(0, 0, 0, 0.87)',
      textActiveColor: '#2F6AEE',
      menuHoverBgColor: 'rgb(229, 229, 229)',
      menuActiveBgColor: 'rgb(239, 229, 253)',
    },
    background: {
      paper: '#FFFFFF',
      default: '#f4f4f7',
    },
    text: {
      primary: 'rgba(0, 0, 0, 0.87)',
      secondary: 'rgba(0, 0, 0, 0.6)',
      disabled: 'rgba(0, 0, 0, 0.38)',
      hint: 'rgba(0, 0, 0, 0.3)',
      white: '#fff',
    },
    btn: {
      hover: 'rgba(0, 0, 0, 0.08)',
    },
    lightBtn: {
      bgColor: '#f5f5f5',
      textColor: 'rgba(0, 0, 0, 0.38)',
    },
    borderColor: {
      main: 'rgba(0, 0, 0, 0.06)',
      dark: 'rgba(0, 0, 0, 0.12)',
    },
    popupColor: {
      main: '#fff',
    },
  },
  status: {
    danger: 'orange',
  },
  typography: {
    fontFamily: Fonts.PRIMARY,
    fontWeightExtraLight: 200,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightBold: 'bold',
    fontWeightExtraBold: 800,
  },
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: 20,
        fontWeight: 'bold',
        [breakpoints.up('md')]: {
          fontSize: 22,
        },
      },
      h2: {
        fontSize: 18,
        fontWeight: 'bold',
        [breakpoints.up('md')]: {
          fontSize: 20,
        },
      },
      h3: {
        fontSize: 16,
        fontWeight: 'bold',
        [breakpoints.up('md')]: {
          fontSize: 18,
        },
      },
      h4: {
        fontSize: 16,
        fontWeight: 'bold',
      },
      h5: {
        fontSize: 14,
        fontWeight: 400,
      },
      h6: {
        fontSize: 14,
        fontWeight: 'bold',
        letterSpacing: 0.5,
      },
      subtitle1: {
        fontSize: 16,
        fontWeight: 400,
        letterSpacing: 0.15,
      },
      subtitle2: {
        fontSize: 14,
        fontWeight: 'bold',
        letterSpacing: 0.1,
      },
      body1: {
        fontSize: 16,
        fontWeight: 400,
        letterSpacing: 0.5,
      },
      body2: {
        fontSize: 14,
        fontWeight: 400,
        letterSpacing: 0.25,
      },
    },
    MuiButton: {
      root: {
        fontWeight: 'bold',
        letterSpacing: 1.25,
        fontSize: 13,
      },
    },
    MuiToggleButton: {
      root: {
        borderRadius: 4,
      },
    },
    MuiCardLg: {
      root: {
        borderRadius: 10,
      },
    },
    MuiCard: {
      root: {
        borderRadius: 4,
        boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14)',
      },
    },
    MuiTab: {
      textColorPrimary: {
        color: 'rgba(0, 0, 0, 0.87)',
      },
    },
    MuiPopover: {
      paper: {
        backgroundColor: '#FFFFFF',
      },
    },
    MuiDialog: {
      paper: {
        backgroundColor: '#FFFFFF',
      },
    },
  },
}

const theme = createTheme({
  ...defaultTheme,
  ...__defaultTheme,
});

 <ThemeProvider theme={theme }>
    {children}
 </ThemeProvider>

Expected behavior 🤔

work as like V4.x.x

import { createTheme } from '@material-ui/core/styles';
import ThemeProvider from '@material-ui/styles/ThemeProvider';

const muiTheme = {
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      iPad: 768,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
  spacing: 4,
  direction: 'ltr',
  palette: {
    type: 'light',
    common: {
      black: '#000',
      white: '#fff',
      dark: '#020202',
    },
    primary: {
      // main: '#6200EE',
      // main: '#2F6AEE', // 主颜色
      main: '#004CAA', // 主颜色
      medium: '#5299EA', // 主颜色-次级
      slight: '#E8EFF8', // 主颜色-轻微
      dark: '#3700B3',
      contrastText: '#fff',
    },
    secondary: {
      main: '#5299EA',
      dark: '#018786',
      contrastText: '#fff',
    },
    success: {
      light: '#D7F5B1',
      main: '#8DCD03',
      dark: '#5D9405',
    },
    info: {
      light: '#9BE7FD',
      main: '#0795F4',
      dark: '#0356AF',
    },
    warning: {
      light: '#FFDE99',
      main: '#FF8C00',
      dark: '#D36F1A',
    },
    error: {
      light: '#FFC7D1',
      lower: '#FF6767',
      medium: '#FA6E71',
      main: '#E00930',
      dark: '#87061E',
    },
    sidebar: {
      bgColor: '#fff',
      textColor: 'rgba(0, 0, 0, 0.6)',
      textDarkColor: 'rgba(0, 0, 0, 0.87)',
      textActiveColor: '#2F6AEE',
      navHoverBgColor: 'rgb(229, 229, 229)',
      navActiveBgColor: 'rgb(239, 229, 253)',
      borderColor: 'rgba(33, 33, 33, 0.08)',
    },
    horizontalNav: {
      navigationColor: 'rgba(255, 255, 255, 0.74)',
      navigationActiveColor: 'rgba(255, 255, 255, 1)',
      textColor: 'rgba(0, 0, 0, 0.6)',
      textDarkColor: 'rgba(0, 0, 0, 0.87)',
      textActiveColor: '#2F6AEE',
      menuHoverBgColor: 'rgb(229, 229, 229)',
      menuActiveBgColor: 'rgb(239, 229, 253)',
    },
    background: {
      paper: '#FFFFFF',
      default: '#f4f4f7',
    },
    text: {
      primary: 'rgba(0, 0, 0, 0.87)',
      secondary: 'rgba(0, 0, 0, 0.6)',
      disabled: 'rgba(0, 0, 0, 0.38)',
      hint: 'rgba(0, 0, 0, 0.3)',
      white: '#fff',
    },
    btn: {
      hover: 'rgba(0, 0, 0, 0.08)',
    },
    lightBtn: {
      bgColor: '#f5f5f5',
      textColor: 'rgba(0, 0, 0, 0.38)',
    },
    borderColor: {
      main: 'rgba(0, 0, 0, 0.06)',
      dark: 'rgba(0, 0, 0, 0.12)',
    },
    popupColor: {
      main: '#fff',
    },
  },
  status: {
    danger: 'orange',
  },
  typography: {
    fontFamily: Fonts.PRIMARY,
    fontWeightExtraLight: 200,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightBold: 'bold',
    fontWeightExtraBold: 800,
  },
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: 20,
        fontWeight: 'bold',
        [breakpoints.up('md')]: {
          fontSize: 22,
        },
      },
      h2: {
        fontSize: 18,
        fontWeight: 'bold',
        [breakpoints.up('md')]: {
          fontSize: 20,
        },
      },
      h3: {
        fontSize: 16,
        fontWeight: 'bold',
        [breakpoints.up('md')]: {
          fontSize: 18,
        },
      },
      h4: {
        fontSize: 16,
        fontWeight: 'bold',
      },
      h5: {
        fontSize: 14,
        fontWeight: 400,
      },
      h6: {
        fontSize: 14,
        fontWeight: 'bold',
        letterSpacing: 0.5,
      },
      subtitle1: {
        fontSize: 16,
        fontWeight: 400,
        letterSpacing: 0.15,
      },
      subtitle2: {
        fontSize: 14,
        fontWeight: 'bold',
        letterSpacing: 0.1,
      },
      body1: {
        fontSize: 16,
        fontWeight: 400,
        letterSpacing: 0.5,
      },
      body2: {
        fontSize: 14,
        fontWeight: 400,
        letterSpacing: 0.25,
      },
    },
    MuiButton: {
      root: {
        fontWeight: 'bold',
        letterSpacing: 1.25,
        fontSize: 13,
      },
    },
    MuiToggleButton: {
      root: {
        borderRadius: 4,
      },
    },
    MuiCardLg: {
      root: {
        borderRadius: 10,
      },
    },
    MuiCard: {
      root: {
        borderRadius: 4,
        boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14)',
      },
    },
    MuiTab: {
      textColorPrimary: {
        color: 'rgba(0, 0, 0, 0.87)',
      },
    },
    MuiPopover: {
      paper: {
        backgroundColor: '#FFFFFF',
      },
    },
    MuiDialog: {
      paper: {
        backgroundColor: '#FFFFFF',
      },
    },
  },
}

 <ThemeProvider theme={muiTheme}>
    {children}
 </ThemeProvider>

Steps to reproduce 🕹

Steps:

  1. using V4.x.x
  2. update to V5.x.x
  3. theme still can not work well
  4. before info 
  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.56)
  npmPackages:
    @emotion/styled:  10.0.27
    @types/react:  17.0.15
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    styled-components: ^5.1.1 => 5.3.0
    typescript: ^3.9.5 => 3.9.10

Context 🔦

 "dependencies": {
        "@babel/runtime": "^7.7.7",
        "@date-io/date-fns": "^1.3.13",
        "@date-io/moment": "^1.3.11",
        "@emotion/react": "^11.7.1",
        "@emotion/styled": "^11.6.0",
        "@mui/icons-material": "^5.4.3",
        "@mui/material": "^5.4.3",
        "@mui/styles": "^5.3.0",
        "@mui/lab": "^5.0.0-alpha.66",
        "@storybook/addon-a11y": "^6.3.4",
        "@storybook/addon-knobs": "^6.2.9",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "ahooks": "^2.9.4",
        "autosuggest-highlight": "^3.1.1",
        "axios": "^0.21.1",
        "axios-mock-adapter": "^1.18.1",
        "babel-eslint": "^10.1.0",
        "babel-loader": "~8.1.0",
        "body-scroll-lock": "^3.1.5",
        "clipboard-copy": "^3.1.0",
        "clsx": "^1.1.1",
        "commander": "^8.3.0",
        "compression-webpack-plugin": "^7.0.0",
        "concurrently": "^6.4.0",
        "connected-react-router": "^6.8.0",
        "cross-env": "^7.0.3",
        "cross-fetch": "^3.0.5",
        "date-fns": "^2.16.1",
        "dayjs": "^1.9.7",
        "dotenv-expand": "^5.1.0",
        "draft-js": "^0.11.6",
        "draftjs-to-html": "^0.9.1",
        "emoji-picker-react": "^3.2.1",
        "eslint-config-alloy": "~4.1.0",
        "firebase": "^8.7.1",
        "graphql": "^15.5.0",
        "history": "^4.10.1",
        "http-proxy-middleware": "^1.0.6",
        "immer": "^8.0.0",
        "js-base64": "^3.6.0",
        "json2xls": "^0.1.2",
        "jss": "^10.2.0",
        "jss-rtl": "^0.3.0",
        "lodash": "^4.17.20",
        "loglevel": "^1.7.1",
        "loglevel-plugin-remote": "^0.6.8",
        "material-table": "^1.65.0",
        "material-ui-popup-state": "^1.6.1",
        "moment": "^2.27.0",
        "node-sass": "^6.0.1",
        "nodemon": "^2.0.15",
        "notistack": "^2.0.3",
        "nprogress": "^0.2.0",
        "path": "^0.12.7",
        "prismjs": "^1.24.1",
        "prop-types": "^15.7.2",
        "raw-loader": "^4.0.1",
        "rc-field-form": "^1.17.4",
        "react": "^17.0.2",
        "react-app-polyfill": "^2.0.0",
        "react-bottom-scroll-listener": "^4.0.0",
        "react-color": "^2.18.1",
        "react-countup": "^4.3.3",
        "react-device-detect": "^1.15.0",
        "react-dom": "^17.0.2",
        "react-draft-wysiwyg": "^1.14.5",
        "react-draggable": "^4.4.3",
        "react-dropzone": "^11.0.2",
        "react-fast-compare": "^3.2.0",
        "react-intl": "^5.8.4",
        "react-jvectormap": "^0.0.16",
        "react-loadable": "^5.5.0",
        "react-notifications": "^1.6.0",
        "react-number-format": "^4.4.1",
        "react-perfect-scrollbar": "^1.5.8",
        "react-placeholder": "^3.0.2",
        "react-redux": "^7.2.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "react-slick": "^0.26.1",
        "react-sortable-hoc": "^1.11.0",
        "react-spring": "^8.0.27",
        "react-swipeable-views": "^0.13.9",
        "react-swipeable-views-utils": "^0.13.9",
        "react-text-mask": "^5.4.3",
        "react-toastify": "^6.1.0",
        "react-tracking": "^8.1.0",
        "react-use": "^17.2.4",
        "react-virtualized": "^9.22.3",
        "reactour": "^1.18.0",
        "recharts": "^2.1.8",
        "redux": "^4.0.5",
        "redux-devtools-extension": "^2.13.8",
        "redux-thunk": "^2.3.0",
        "slick-carousel": "^1.8.1",
        "styled-components": "^5.1.1",
        "sweetalert2": "^9.17.1",
        "sweetalert2-react-content": "^3.0.3",
        "ts-node-dev": "^1.1.8",
        "typescript": "^3.9.5"
    },
    "devDependencies": {
        "@babel/plugin-proposal-optional-chaining": "^7.14.2",
        "@commitlint/config-conventional": "^12.1.4",
        "@storybook/addon-actions": "^6.3.4",
        "@storybook/addon-links": "^5.3.19",
        "@storybook/addons": "^5.3.19",
        "@storybook/preset-create-react-app": "^3.0.0",
        "@storybook/react": "^6.3.4",
        "@typescript-eslint/eslint-plugin": "^2.23.0",
        "@typescript-eslint/parser": "^2.23.0",
        "chalk": "^4.1.2",
        "customize-cra": "^1.0.0",
        "dotenv-cli": "^4.0.0",
        "eslint-config-prettier": "^6.10.0",
        "eslint-config-react-app": "^5.2.0",
        "eslint-plugin-flowtype": "^4.6.0",
        "eslint-plugin-import": "^2.20.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-react": "^7.23.2",
        "eslint-plugin-react-hooks": "^2.5.0",
        "faker": "^5.5.3",
        "husky": "4.2.3",
        "jumbo-coremat": "^0.0.8",
        "lint-staged": "^10.0.8",
        "md5": "^2.3.0",
        "prettier": "^2.2.1",
        "prettier-miscellaneous": "^1.5.3",
        "qiankun": "^2.5.0",
        "react-app-rewired": "^2.1.8",
        "shelljs": "^0.8.4"
    },

Your environment 🌎

`npx @mui/envinfo` ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ``` ``` System: OS: Windows 10 10.0.19042 Binaries: Node: 16.13.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.56) npmPackages: @emotion/react: ^11.7.1 => 11.8.1 @emotion/styled: ^11.6.0 => 11.8.1 @mui/base: 5.0.0-alpha.69 @mui/icons-material: ^5.4.3 => 5.4.2 @mui/lab: ^5.0.0-alpha.66 => 5.0.0-alpha.69 @mui/material: ^5.4.3 => 5.4.3 @mui/private-theming: 5.4.2 @mui/styled-engine: 5.4.2 @mui/styles: ^5.3.0 => 5.4.2 @mui/system: 5.4.2 @mui/types: 7.1.2 @mui/utils: 5.4.2 @types/react: 17.0.39 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: ^5.1.1 => 5.3.3 typescript: ^3.9.5 => 3.9.10 ```
mnajdova commented 2 years ago

The structure of the theme was changed, please follow the migration guide: https://mui.com/guides/migration-v4/#main-content

Here is one breaking change that you need to adopt:


-overrides: {
-  MuiTypography: {
+components: {
+  MuiTypography: {
+    styleOverrides: {
       h1: {
         fontSize: 20,
         fontWeight: 'bold',
         [breakpoints.up('md')]: {
           fontSize: 22,
         },
       },
     },
   },
haoyinag commented 2 years ago

@mnajdova i was stupid
thank you so much