Material ui 'sx' 属性没有采用我的 themeProvider 的新值

Question

在我的代码中，我添加了自定义 createTheme，当我尝试更改框背景时，它采用默认值，即蓝色，我知道我在这里做错了什么

import React from 'react'
import { Typography , Button } from '@material-ui/core';
import BatteryAlertIcon from '@mui/icons-material/BatteryAlert';
import { purple, red } from '@material-ui/core/colors';
import { createTheme  , ThemeProvider } from '@material-ui/core'
import { Drawer } from '@mui/material';
import { Alert } from '@mui/material';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

const theme = createTheme({
    palette: {
        primary:{
          main:purple[500]
        },
        secondary:{
          main:red[700]
        }
    },
    
})

function Start() {
    
  return (
    <ThemeProvider theme={theme}>
        <Container fixed >
          <Alert severity="error">This is an error alert — check it out!</Alert>
          <Box sx={{
            bgcolor:'primary.main', <<<------- shows blue color (default value)
            width:'100%',
            display:'flex',
            pt:'20rem'
          }}>
            <Button variant="contained" disableElevation component='h2'>CLICK ME</Button>
          </Box>

        </Container>

    </ThemeProvider>
  )
}

export default Start

我尝试搜索解决方案，但没有明确的答案

Answer 1

发生这种情况是因为您将属性值作为字符串传递。改为这样做

import React from 'react'
import { Typography , Button } from '@material-ui/core';
import BatteryAlertIcon from '@mui/icons-material/BatteryAlert';
import { purple, red } from '@material-ui/core/colors';
import { createTheme  , ThemeProvider } from '@material-ui/core'
import { Drawer } from '@mui/material';
import { Alert } from '@mui/material';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

const theme = createTheme({
    palette: {
        primary:{
          main:purple[500]
        },
        secondary:{
          main:red[700]
        }
    },
    
})

function Start() {
    console.log(theme,"THEME")
  return (
    <ThemeProvider theme={theme}>
        <Container fixed >
          <Alert severity="error">This is an error alert — check it out!</Alert>
          <Box sx={{
            bgcolor: theme.palette.primary.main, //<<<------- now shows purple color (default value)
            width:'100%',
            display:'flex',
            pt:'20rem'
          }}>
            <Button variant="contained" disableElevation component='h2'>CLICK ME</Button>
          </Box>
        </Container>
    </ThemeProvider>
  )
}

export default Start

输出：

Material ui 'sx' 属性没有采用我的 themeProvider 的新值

Material ui 'sx' property does not take the new value of my themeProvider

reactjs

material-ui

Material ui 'sx' 属性 没有采用我的 themeProvider 的新值

Material ui 'sx' property does not take the new value of my themeProvider

reactjs

material-ui

Material ui 'sx' 属性没有采用我的 themeProvider 的新值