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

Question

你能解释一下和号后面的空格和没有空格有什么区别吗
例如
你能解释一下为什么 & label.Mui-focused 和 &.Mui-focused 字段集中的 & 符号后面有一个空格吗

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.b表示具有类 a 的元素和 b

.c .d表示具有类 d 的元素具有类 .c 的 WITHIN 元素

.e, .f表示任何具有 e 的元素或 f作为类

如果您对如何将其转化为实际的 CSS 感到困惑，请使用 JSS playground :
这个:

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

会变成:

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

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

^ 这里第二个选择器的目标是 fieldset出现在带有 MuiOutlinedInput-root 的元素内和 Mui-focused位于 button 内的类.就像是:

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