符号和标签名称的含义是什么：用于材质UI中的css样式。例如： &div： { display： 'flex}

Question

我使用的是React Material UI。符号&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>

Answer 1

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

&可用于指向主组件。

&被我们为生成的唯一类名所替换这个样式化的组件，使得复杂的逻辑更容易实现。

参见Material-UI的嵌套选择器演示。

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

Answer 2

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