Palette color customization does not work on some components

[HasinaNjaratin]

Here is my code:

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import {Box, Button} from '@mui/material';

const theme = createTheme({
  palette: {
    secondary: {
      main: '#00bbff',
    },
  },
});

export default function Palette() {
  return (
    <ThemeProvider theme={theme}>
      <>
        <Box bgcolor={'secondary'}>teshht</Box>
        <Button color="secondary">Secondary</Button>
      </>
    </ThemeProvider>
  );
}

the color is applied on the button but not on the box component

[YuriyGorvitovskiy]

Box component is using default Theme, and not subject to alteration with custom theme or sx parameters depending on theme Looks like the following code is a culprit: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Box/Box.js

const defaultTheme = createTheme();

const Box = createBox({
  defaultTheme,
  defaultClassName: 'MuiBox-root',
  generateClassName: ClassNameGenerator.generate,
});

[siriwatknp]

@HasinaNjaratin Thanks for asking. The Box component is different from others. The purpose of it is to help you write styles directly in jsx.

The core feature of Box is the sx prop which you can write object styles with theme values depending on the key, for example:

<Box sx={{ color: 'primary.main' }} />
// or
<Box color="primary.main" />

will result in color: $theme.palette.primary.main

To summarize, the color of the Box targets specific values in the theme whereas Button's color prop targets the palette ('primary' | 'error' | 'info' |...) and all the styles will be calculated for you.

For more details about sx prop: https://mui.com/material-ui/react-box/#the-sx-prop