与 v4 相比，如何覆盖 Material UI v5 中的默认样式？

Question

在 Material UI v4 中，我使用 @mui/styles 中的 makeStyles 和 withStyles 来覆盖组件的默认样式，这是自定义应用程序外观的直接方法。然而，升级到 Material UI v5 后，makeStyles 已被弃用，并且随着 sx prop 和 styled API 的引入，样式系统似乎发生了显着变化。

如何覆盖 Material UI v5 中的默认组件样式（例如更改 MuiButton 填充或颜色）？现在在 MUI v5 中全局或本地覆盖默认样式的最佳实践是什么，它与 v4 有何不同？

还希望获得全局覆盖（如主题）和特定覆盖（如使用 sx prop 或 styled API）的示例。

Answer 1

希望有帮助。

这是基本想法

• 调色板很少

• 如小学、中学等

• 自定义颜色

  • 使用palette属性修改
    • 在示例中，我刚刚更新了主要
    • 您可以为次要、成功、错误、信息、警告执行此操作
    • 您还可以添加更多属性，但需要全局修复打字稿

• 要全局自定义组件，请使用组件属性

  • Mui按钮
    • 为此提供了一个示例
  • MuiTable
  • Mui输入法等...
    • 现在考虑默认颜色和设计
    • 还要关心他们的变体

import { createTheme, ThemeOptions } from '@mui/material/styles'

const primary = {
  main: '#7A5AF8',
  light: '#F4F3FF',
  dark: '#3E1C96',
  contrastText: '#FFFFFF',
  50: '#F4F3FF',
  100: '#EBE9FE',
  200: '#D9D6FE',
  300: '#BDB4FE',
  400: '#9B8AFB',
  500: '#7A5AF8',
  600: '#6938EF',
  700: '#5925DC',
  800: '#4A1FB8',
  900: '#3E1C96'
}

export const lightTheme: ThemeOptions = createTheme({
  palette: {
    primary,
  },
  components: {
    MuiButton: {
      defaultProps: {
        disableRipple: true,
        variant: 'contained'
      },
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: '6px',
          padding: '10px 16px',
          fontWeight: 500
        }
      },
      variants: [
        {
          props: {
            variant: 'contained'
          },
          style: ({ theme }: { theme: Theme }) => ({
            paddingTop: theme.spacing(0.75),
            paddingBottom: theme.spacing(0.75),
          })
        }
      ]
    }
  }
})

• 制作一个单独的组件来提供主题

import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
import { lightTheme } from 'your-constant-location'


const ThemeProvider = ({ children }) => {
   return (
     <MuiThemeProvider theme={lightTheme}>
       <CssBaseline />
       <>{children}</>
     </MuiThemeProvider>
   )
}
 

在您的根应用程序中使用此提供程序

const App = () => {
  return (
    <ThemeProvider>
       ...your app
    </ThemeProvider>

  )
}