时间戳

首页 > 解决方案 > 在 Material UI 中，和号后面的空格和没有空格有什么区别？

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

问题描述

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

例如

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

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

标签： javascriptreactjsmaterial-uijss

解决方案

它与 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表示具有aAND类的元素b
  • .c .d表示具有类的元素dWITHIN 具有类的元素.c
  • .e, .f表示具有eORf作为类的任何元素

如果您对它如何变成实际的 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;
}

^ 这里第二个选择器的目标是 a ，它出现在一个带有AND类fieldset的元素中，该类是 WITHIN a 。就像是：MuiOutlinedInput-rootMui-focusedbutton

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

推荐阅读