MUI 5 className and SX prop show [object] instead of CSS class

Question

I'm struggling to grasp styling changes in MUI 5. I have a bunch of styling which was working fine in Material UI 4 but when trying to apply the same styling in MUI 5 my web inspector shows it as an [object] instead of the CSS class name when used with sx.

For example, I created test case below and the only style that is actually working is 'myBorder' with style prop. sx isn't working. Can anyone shed some light on what I'm doing wrong, newbie here?

import * as React from "react";

const styles = {
  myBackground: {
    backgroundColor: "red"
  },
  myBorder: {
    border: "2px solid green"
  },
  myFont: {
    color: "blue"
  }
};

export default function Index() {
  return (
    <div
      sx={styles.myBackground}
      style={styles.myBorder}
      classes={styles.myFont}
      className={styles.myFont}
      maxWidth="sm"
    >
      This is a test
    </div>
  );
}

See codepen at https://codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js

ahadinyoto · Accepted Answer · 2021-11-24 09:57:26Z

6

sx only works with MUI component, not HTML element. So you need to replace div. You can use Box instead.

<Box sx={styles.myBackground}>
This is a test
</Box>

For HTML element, use the style attribute, which for your case it's working correctly. For more https://mui.com/system/the-sx-prop/.

answered Nov 24, 2021 at 9:57

ahadinyoto

612 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cmshnrblu · Accepted Answer · 2022-03-26 01:54:30Z

According to the documentation, makeStyles is deprecated and sx is the intended API for design. What about in cases where you need to use an HTML element? I am writing a component that requires "object" for displaying PDFs. So, how would I style this element?

import { Box } from '@mui/material'

export default function Index() {
  return (
   <Box sx={{
    '& object': {
       backgroundColor: "red",
       border: "2px solid green",
       color: "blue",
       maxWidth: 'md',
     }}}
    >
      <object/>
    </Box>
  );
}

In this way, we can indirectly style any HTML element when needed. Since the "Box" component does not introduce any formatting of it's own, that would be the recommended way to implement this technique.

More can be found on this technique: https://mui.com/system/the-sx-prop/#array-values.

ChrisH. · Accepted Answer · 2023-07-20 13:17:07Z

1

sx only works with MUI5^. If you want to have some similarity to previous makeStyles, you can do what our team is doing in the stylesheet:

import { SxProps } from "@mui/material";

//this should be placed in a general theme types file
export interface SxObjType {
[index: string]: SxProps;
};

//if you want to use the theme you will need to import MUI's theme object here
const sxStyles = (error:boolean):SXObjType => {
return {
  buttonStyle: {
    backgroundColor :"white",
    color: error ? "red":"black",
    "&.Mui-disabled" : {
      color: "grey",
      },
    },
  };
};

export { sxStyles };

And then in the component:

import { sxStyles } from "./button.styles.ts";
import { Button } from "@mui/material";

const CustomButton = ({ error })=>{
const classes = sxStyles(error);

return (
  <Button 
  sx={ classes.buttonStyle }
  >Click me</Button>
  );
};

answered Jul 20, 2023 at 13:17

ChrisH.

1051 silver badge5 bronze badges

1 Comment

guneetgstar Over a year ago

Although I did not use this whole code but it helped me find that I need not add space between &. and Mui-disabled. Somehow the space worked for me in other classes on mui but not specifically for &.Mui-disabled.

Samira · Accepted Answer · 2021-11-23 13:38:14Z

0

you need to use makeStyles in material UI and you can not use style or classes there :

import * as React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(() => ({
  myBackground: {
    backgroundColor: "yellow"
  },
  myBorder: {
    border: "2px solid green"
  },
  myFont: {
    color: "red"
  }
}));

export default function Index() {
  const styles = useStyles();
  return (
    <div className={`${styles.myFont} ${styles.myBackground}`} maxWidth="sm">
      This is a test
    </div>
  );
}

it works for me very well.

code

edited Nov 23, 2021 at 13:38

answered Nov 23, 2021 at 12:59

Samira

2,8031 gold badge18 silver badges30 bronze badges

3 Comments

Samira Over a year ago

I added codesandbox in my answer please check it

TheToto Over a year ago

makeStyles is deprecated in Mui 5.

sybercoda Over a year ago

I was using makeStyles in v.4 and it is deprecated. Note that MUI 5 docs state that you can still use makeStyles with workaround but I would rather adopt MUI 5 best practice while my app is still small. MUI 5 says "The makeStyles JSS utility is no longer exported from @mui/material/styles. You can use @mui/styles/makeStyles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @mui/material, it's recommended that you use the ThemeProvider component from @mui/material/styles instead."

Collectives™ on Stack Overflow

MUI 5 className and SX prop show [object] instead of CSS class

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related