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

您可能指的是 .color>*:checked 元素

Answer 2

'&$checked' 表示您可以在选中后覆盖该元素。

在你的例子中，你在选中复选框后覆盖了复选框的颜色

"&$checked": {
      color: theme.status.danger
    }

PFA 详情

Answer 3

& 是对父规则的引用（在本例中为 "root"）。 $ruleName（在本例中 "ruleName" 是 "checked"）引用相同样式的本地规则 sheet.

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

所以在这种情况下，假设为 "root" 生成的 class 名称为 "root-generated-1"，为 "checked" 生成的 class 名称为 "checked-generated-2"，则 &$checked 等同于 .root-generated-1.checked-generated-2，这意味着它将匹配同时应用了 root 和 checked class 的元素。

就Checkbox的效果而言，"checked" class是applied to the Checkbox by Material-UI when it is in a "checked" state. This style rule is overriding the default color of a checked Checkbox（默认是主题中的副色）

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

What does the symbol '&$checked' mean

javascript

reactjs

material-ui

jss