sx prop not getting transformed in custom components in Material-UI 5

user_3221274 0
Viewed 8064

Could not find any related question in StackOverflow.

So, in box component, sx prop is getting transformed, say from

<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    height: '100%'
  }}
>

to

<div class="MuiBox-root MuiBox-root-371"/>

but its not transforming in other components like ListSubheader

<ListSubheader
  disableGutters
  disableSticky
  sx={{
    color: 'text.primary',
    fontSize: '0.75rem',
    lineHeight: 2.5,
    fontWeight: 700,
    textTransform: 'uppercase'
  }}
>

is transforming to

<li class="MuiListSubheader-root" sx="[object Object]">Manage</li>

I am using create-react-app with Material-UI 5, this is my package.json

this is my package.json

For some reason, my sx prop is not getting transformed to a class name. a screenshot of that

a screenshot of that

Any hints what configuration might be incorrect? Not sure, what all information to provide.

material-ui create-react-app reactjs
1 Answers

Check your component code, you might import the v4 component:

import ListItemText from "@material-ui/core/ListItemText";

In v5, MUI components are moved to a new package called @mui/material

import ListItemText from "@mui/material/ListItemText";

You can only use sx in other components without configuration in MUI v5, if you're using v4 or the older beta versions of the v5, you have to create a wrapper component as explained from this section:

import {
  compose,
  spacing,
  palette,
  styleFunctionSx
} from "@material-ui/system";
import MuiListSubheader from "@material-ui/core/ListSubheader";

const styleFunction = styleFunctionSx(compose(spacing, palette));
const ListSubheader = styled(MuiListSubheader)(styleFunction);

<ListSubheader sx={...} />

In v5, you can use sx directly from the components since they've been migrated to emotion.

Edit 69243066/sx-prop-not-getting-transformed-in-custom-componsnts-in-material-ui-5

user_94494260
Related