在 Material UI 中，& 号后面的空格和没有空格有什么区别？

Question

你能解释一下&号后面有空格和没有空格有什么区别吗

例如

您能否解释一下为什么 & label.Mui-focused 中的 & 符号后面有一个空格，而 &.Mui-focused fieldset 中没有空格

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

Answer 1

它与 CSS 选择器相同：

<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;
}

这里：

• .a.ba表示具有类AND的元素b
• .c .d表示具有类的元素d在具有类的元素内.c
• .e, .f表示具有eORf作为类的任何元素

如果您对如何将其变成实际的 CSS 感到困惑，请使用JSS Playground：

这：

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

会变成：

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

^ 这里第二个选择器的目标是 a ，它出现在AND类位于 a 内的fieldset元素内。就像是：MuiOutlinedInput-rootMui-focusedbutton

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

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