符号“&$checked”是啥意思

Posted 2023-02-22

【中文标题】符号“&$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”是什么意思？ 请详细解释每个符号的含义，以及相关的逻辑。

感谢您的回答。

【参考方案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（默认为主题中的辅助颜色）。

相关答案和文档：

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'中的单引号是什么意思。有文件吗？对不起，也许我太角质了。

单引号只是用于定义字符串的 javascript 语法。

【参考方案2】：

'&$checked' 表示你可以在检查后覆盖元素。

在您的情况下，您将在检查后覆盖复选框的颜色

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

PFA 详情

【参考方案3】：

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