符号“& $ 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-generated-1.checked-generated-2表示它将匹配同时应用了root和checked类的元素.

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.

至于对Checkbox的影响，选中"类为Checkbox .此样式规则将覆盖选中的复选框的默认颜色(默认为主题中的辅助颜色).

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中?

• 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
• Internal implementation of "makeStyles" in React Material-UI?

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