javascript - 符号 '&$checked'是什么意思

Question

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { orange } from '@material-ui/core/colors';

const useStyles = makeStyles(theme => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <Checkbox
      defaultChecked
      classes={{
        root: classes.root,
        checked: classes.checked,
      }}
    />
  );
}

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

this CodeSandbox 中使用的符号“&$checked”是什么意思？ ？请详细解释每个符号的含义，以及相关逻辑。

感谢您的回答。

Answer 1

& 是对父规则(在本例中为“root”)的引用。 $ruleName(在本例中“ruleName”被“选中”)引用同一样式表中的本地规则。

为了澄清上面的一些术语，makeStyles 的参数用于生成可能包含多个样式规则的样式表。每个对象键(例如“root”、“checked”)都称为“规则名称”。当您调用 useStyles 时，生成的 classes 对象包含每个规则名称到生成的 CSS 类名称的映射。

所以在这种情况下，假设为“root”生成的类名是“root-generated-1”，为“checked”生成的类名是“checked-generated-2”，那么 &$ checked 等同于 .root-generated-1.checked-generated-2 意味着它将匹配同时具有 root 和 checked 的元素 应用于它的类。

就 Checkbox 的效果而言，“checked”类是 applied to the Checkbox当 Material-UI 处于“选中”状态时。此样式规则覆盖 default color of a checked Checkbox (默认为主题中的次要颜色)。

相关答案和文档:

• > https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule
• > https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
• > Internal implementation of "makeStyles" in React Material-UI?