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”为“ checked”）在同一样式表中引用了本地规则。

为阐明上述某些术语，makeStyles的参数用于生成可能具有多个样式规则的样式表。每个对象密钥（例如“ root”，“ checked”）被称为“规则名称”。调用useStyles时，生成的classes对象包含每个规则名称到生成的CSS类名称的映射。

因此，在这种情况下，我们假设为“ root”生成的类名是“ root-generation-1”，而为“ checked”生成的类名是“ checked-generation-2”，那么&$checked等效于.root-generated-1.checked-generated-2，这意味着它将匹配同时应用了root和checked类的元素。

就对Checkbox的影响而言，Material-UI处于“已检查”状态时，“已检查”类为applied to the Checkbox。此样式规则将覆盖default color of a checked Checkbox（默认为主题中的辅助颜色）。

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

3 个答案: