In Material UI what is the difference between a space after the ampersand and no space?

Question

Can you please explain what is the difference between a space after the ampersand and no space

e.g.

Can you please explain why there is a space after the ampersand in & label.Mui-focused and no space in &.Mui-focused fieldset

const WhiteBorderTextField = styled(TextField)`
  & label.Mui-focused {
    color: white;
  }
  & .MuiOutlinedInput-root {
    &.Mui-focused fieldset {
      border-color: white;
    }
  }
`;

Sandrasandro

To understand that you need to know first that In scss & refer to the classname itself secondly white space is used to select the classname of all that clsname ex: label.Mui-focused inside the classname whose value & is referring to. have a look to this w3schools.com/cssref/sel_element_element.asp – Hautrhin

Answer 1

It's the same as CSS selectors:

<div class="a b">
  a and b
</div>

<div class="c">
  <div class="d">d inside c</div>
</div>

<div class="e">e</div>
<div class="f">f</div>

.a.b {
  background-color: gold;
}

.c .d {
  background-color: blue;
}

.e, .f {
  background-color: red;
}

Here:

• .a.b means an element which has class a AND b
• .c .d means an element with class d WITHIN element with class .c
• .e, .f means any element that has either e OR f as class

If you get confused how that turns into actual CSS use JSS playground:

This:

export default {
  button: {
    '& label.Mui-focused': {
      color: 'white',
    },
    '& .MuiOutlinedInput-root': {
      '&.Mui-focused fieldset': {
        'border-color': 'white',
      },
    },
  },
};

Will turn into:

.button-0-1-13 label.Mui-focused {
  color: white;
}

.button-0-1-13 .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: white;
}

^ Here the second selector targets a fieldset which appears WITHIN an element with MuiOutlinedInput-root AND Mui-focused class which is WITHIN a button. Something like:

<div class="button-0-1-13">
  <div class="MuiOutlinedInput-root Mui-focused">
    <fieldset>
      Your fieldset here
    </fieldset>
  </div>
</div>

Past