符号“&$checked”是什么意思答案

【问题标题】：What does the symbol '&$checked' mean符号“&$checked”是什么意思
【发布时间】：2020-04-02 06:08:21
【问题描述】：

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”是什么意思？请详细解释每个符号的含义，以及相关的逻辑。

感谢您的回答。

【问题讨论】：

标签： javascript reactjs material-ui jss

【解决方案1】：

& 是对父规则（在本例中为“根”）的引用。 $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 的效果而言，当Material-UI 处于“已选中”状态时，“已选中”类为applied to the Checkbox。此样式规则覆盖default color of a checked Checkbox（默认为主题中的辅助颜色）。