MUI 样式 CSS 选择器中的 & 符号

Question

&MUI 函数中 CSS 选择器之前何时需要使用 & 符号 ( ) styled？例如，以下两个版本的工作方式似乎相同：

// With ampersand
const CssTextField = styled(TextField)({
  '& label.Mui-focused': {
    color: 'green',
  },
  '& .MuiInput-underline:after': {
    borderBottomColor: 'green',
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: 'red',
    },
    '&:hover fieldset': {
      borderColor: 'yellow',
    },
    '&.Mui-focused fieldset': {
      borderColor: 'green',
    },
  },
});

// Without ampersand sometimes
const CssTextField = styled(TextField)({
  "label.Mui-focused": {
    color: "green"
  },
  ".MuiInput-underline:after": {
    borderBottomColor: "green"
  },
  "& .MuiOutlinedInput-root": {
    fieldset: {
      borderColor: "red"
    },
    ":hover fieldset": {
      borderColor: "yellow"
    },
    "&.Mui-focused fieldset": {
      borderColor: "green"
    }
  }
});

CodeSandbox：https://codesandbox.io/s/busy-oskar-xwe7ke? file=/demo.tsx:0-1280

我发现有时（但并非总是）删除＆符号不会改变结果。