reactjs 符号和标记名的含义：用于材质UI中的css样式,Ex：&div：{ display：'flex' '}

uajslkp6 于 2023-06-05 发布在 React

关注(0)|答案(2)|浏览(85)

使用React Material UI symbol**&div：**在这个CSS样式中是什么意思？CSS样式在下面。

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

下面是使用该类的代码片段。

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

reactjs

来源：https://stackoverflow.com/questions/65840468/what-is-meaning-of-symbol-tagname-for-css-styling-in-material-ui-ex-div

2条答案

按热度按时间

yhived7q1#

它是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>
  );
}

赞(0）回复(0）举报 2023-06-05

pkbketx92#

&div将样式应用于contactWrapper类中的<div>标记。这是材质UI进行选择器嵌套的方式

赞(0）回复(0）举报 2023-06-05