MUI5 sx prop behavior

Question

I'm playing with Material UI 5 sx props just out of curiosity and can't understand how to make it similar to the previous MUI 4 makeStyles fn. I'm trying to pass JSS classnemaes to sx props. So in this code snippet, I want to overwrite the color for even strings:

import { Typography } from "@mui/material";
const styles = {
  green: {
    color: 'green',
  },
  red: {
    color: 'red',
  },
  
}
const options = ['even', 'odd', 'even', 'odd']
export default function CssModulesSlider() {
  console.log('classes', styles)
  return (
    <>
    {options.map((item, index)=> {
      if(index %2 === 0){
        return (
          <Typography sx={{...styles.red}}>
              {item}
          </Typography>
        )
      } else {
       return (
        <Typography sx={{...styles.red, ...styles.green,}}>
            {item}
        </Typography>
       ) 
      }
      
    })}
    </>
  );
}

MUI compiles this to different CSS classes:

.css-**1kivl2a**-MuiTypography-root {
//some mui typography stuff here
    color: red;
}
.css-**1ti676r**-MuiTypography-root {
//some mui typography stuff here
    color: green;
}

And everything works perfect in this codesandbox example,

until I change the order of defining classes in sx props:

//from
sx={{...styles.red, ...styles.green,}}
//to
sx={{...styles.green, ...styles.red,}}

While styles object is still the same as you can see in console.log, the MUI compiles it all to one CSS class, so all list items have the same class with the color: red rule. And it's not about CSS rules overwrite depending on it's order, because, again, the classes in compiled CSS are the same in the second case

Sure that using CSS modules, emotion or styled components is preferable. But does anybody know why this happens?

score 0 · Answer 1 · answered Jan 09 '22 at 14:49

It's not MUI specifically, it's how spread (...) works

const styles = {
  green: {
    color: 'green',
  },
  red: {
    color: 'red',
  }, 
}

console.log('...red + ...green => green', {...styles.red, ...styles.green});
console.log('...green + ...red => red', {...styles.green, ...styles.red});

MUI5 sx prop behavior

1 Answers1