'& $ checked'符号是什么?吝啬的 [英] What does the symbol '&$checked' mean

问题描述

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

What does the symbol '&$checked' mean used in this CodeSandbox? Please explain the meaning of each symbol in detail, and the related logic.

感谢您的回答.

推荐答案

& 是对父规则(本例中为"root")的引用. $ ruleName (在这种情况下，其中的"ruleName"为"checked")引用了同一样式表中的本地规则.

The & is a reference to the parent rule ("root" in this case). $ruleName (where "ruleName" is "checked" in this case) references a local rule in the same style sheet.

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

To clarify some of the terms above, the parameter to makeStyles is used to generate a style sheet potentially with multiple style rules. Each object key (e.g. "root", "checked") is referred to as a "rule name". When you call useStyles the resulting classes object contains a mapping of each rule name to a generated CSS class name.

因此，在这种情况下，假设"root"的生成类名是"root-generation-1"，而"checked"的生成类名是"checked-generation-2"，则&$ checked 等效于 .root-generation-1.checked-generation-2 ，这意味着它将与同时具有 root 和的元素匹配已选中类.

So in this case let's say that the generated class name for "root" is "root-generated-1" and the generated class name for "checked" is "checked-generated-2", then &$checked is equivalent to .root-generated-1.checked-generated-2 meaning it will match an element that has both the root and checked classes applied to it.

就对复选框的影响而言，选中"类为选中的复选框的默认颜色(默认为主题中的辅助颜色).

As far as the effect on the Checkbox, the "checked" class is 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 (the default is the secondary color in the theme).

相关答案和文档:

• https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule
• 内部实现"makeStyles"在React Material-UI中?

这篇关于'& $ checked'符号是什么?吝啬的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！