符号“&$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>
  );
}

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

谢谢回答。

Answer 1

的&是给父规则（在此情况下的“根”）的引用。$ruleName（在这种情况下，“ruleName”被“选中”）引用同一样式表中的本地规则。

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

因此，在这种情况下，假设“root”的生成类名称是“root-generated-1”，“checked”的生成类名称是“checked-generated-2”，则&$checked相当于.root-generated-1.checked-generated-2意味着它将匹配一个应用了root和checked类的元素。

至于对 的影响Checkbox，当 Material-UI 处于“已检查”状态时，“已检查”类会应用于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
• React Material-UI 中“makeStyles”的内部实现？