符号 &tagname 的含义：用于材质 UI 中的 css 样式。例如：&div: display: 'flex' '

Posted 2023-02-22

【中文标题】符号 &tagname 的含义：用于材质 UI 中的 css 样式。例如：&div: display: \'flex\' \'

【英文标题】：What is meaning of symbol &tagname: for css styling in material UI. Ex: &div: display: 'flex' '符号 &tagname 的含义：用于材质 UI 中的 css 样式。例如：&div: display: 'flex' '

【发布时间】：2021-04-26 15:26:35

【问题描述】：

我正在使用 React Material UI。符号 &div: 在组件的这个 css 样式中是什么意思。 CSS样式如下。

  contactWrapper: 
    marginTop: theme.spacing(1),
    '& div': 
      display: 'flex',
    ,
  ,

下面是使用类的代码sn-p。

 <div className=classes.contactWrapper>
            <span className=classes.contentLabel> Contact:</span>
            <div><Person className=classes.contactIcon fontSize="small" /> primaryContact.name</div>
            <div><Phone className=classes.contactIcon fontSize="small" /> primaryContact.phone</div>
          </div>
 </div>

【参考方案1】：

它是 Material-ui 的Styled-Components API 的一部分。它是元素父类名的引用。

与号 (&) 可用于引用主要组件。

与号 (&) 被我们生成的唯一类名替换为 样式化的组件，使得复杂的逻辑变得容易。

参见 Material-UI 的 Nesting Selectors 演示。

const useStyles = makeStyles(
  root: 
    color: 'red',
    '& p':  // p that is child of root classname
      margin: 0,
      color: 'green',
      '& span':  // span that is child of parent p
        color: 'blue',
      ,
    ,
  ,
);

export default function NestedStylesHook() 
  const classes = useStyles();

  return (
    <div className=classes.root>
      This is red since it is inside the root.
      <p>
        This is green since it is inside the paragraph' '
        <span>and this is blue since it is inside the span</span>
      </p>
    </div>
  );

【参考方案2】：

&div 将样式应用于contactWrapper 类中的<div> 标签。 这是 Material UI 的做法Selector nesting