Search code examples
javascriptreactjsmaterial-ui

When should I use style instead of sx prop in Material-UI?

The style and sx prop in MUI components pretty much do the same thing. The sx prop offers a few shorthand syntaxes, and allows you to access the theme object. But apart from that, they seem identical. When are you supposed to use one over the other?

Solution

  • To really understand which one to use, we need to understand what's happening under the hood. Material UI uses emotion(, or whatever styling engine you chose manually), in order to style its components. On the surface, the following two might seem to be doing the same thing:

    <Box sx={{ height:'50px', width:'25px' }}/>
<div style={{ height:'50px', width:'25px' }}/>

    Both render divs with the required height and width, to the DOM. But for the div, the styles are applied as inline styles, whereas the Box applies the styles in the form of a class, to the div element. The class definition itself, is stored in the head tag, which you can inspect, to see the following CSS class declaration with emotion Css class applied to div

    This is all well and fine, as long as we're declaring the styles only once. But stuff really goes crazy when you add dynamic styling. Perhaps there is a state variable controlling the height of your div.

    function CustomComponent(){
  const [computedHeight,setComputedHeight]=useState();

  useEffect(()=>{
    window.addEventListener('resize',()=>setComputedHeight(window.innerWidth/2))
  },[]);

  return (
    <Box sx={{ height:computedHeight, width:'25px'}}/>
    <div style={{ height:computedHeight, width:'25px'}}/>
  )

    This is a common scenario, where some external variable(the width of the browser window for eg.) determines some property of your component. What happens is every time this state changes into a new value, MUI creates a new class, sets it as the class for the Box, and adds the definition to the <head> tag of your website, as a brand new <style> tag. So in very little time, the head tag fills up with hundreds of style tags, which is clearly undesirable.

    However, in the case of your div tag, the styles are located inline. So no matter if the value changes once, or a hundred times, there is only one definition of the style, and it exists on the element itself. No need to worry about it.

    EDIT 1:

    MUI creates a new style tag only for a style that hasn't been used before. To illustrate, if your sx prop dynamically changes the color between 'red' and 'blue' like this,

    sx={{
  color: dynamicValue ? 'red' : 'blue',
}}

    MUI will only create two tags(for the two possible values of color), no matter how many times you change the value of dynamicValue. MUI will just use the old style tags.

    Note on Pseudo selectors: Another thing to note is that inline styles cannot make use of pseudo elements(like ::after, or ::before), or pseudo classes(like :hover, :focus etc.), as inline styles directly affect the current element. You would have to employ a workaround like css variables in order to change the styles on pseudo elements/classes.

    TLDR; Put your dynamic styles(the ones that change based on some variable) in the style prop, and put all the static styles in the sx prop.