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

【问题标题】：In Material UI what is the difference between a space after the ampersand and no space?在 Material UI 中，和号后面的空格和没有空格有什么区别？
【发布时间】：2021-03-17 01:49:39
【问题描述】：

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

例如

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

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

【问题讨论】：

要了解，您首先需要知道在 scss & 中引用类名本身，其次使用空格来选择所有 clsname 的类名例如：label.Mui-focused 在类名中，其值& 指的是。看看这个w3schools.com/cssref/sel_element_element.asp

标签： javascript reactjs material-ui jss

【解决方案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 WITHIN 类的元素 .c
.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>

【讨论】：