使用材质ui createStyles
问题描述:
我正在尝试将css从较少的文件转换为实质的createStyles,而我无法理解它的工作原理.
I'm trying to transform my css from a less file to material createStyles and i can't get my head around how it works.
我了解createstyle的基本知识,但我的子选择器无法正常工作
I understand the basics of the createstyles but i can't my child selector working
我想要的是能够访问CSS类MissionStatusLibelle
All i want is to be able to access the css class missionStatusLibelle
.missionStatus {
display: flex;
align-items: center;
height: 34px;
width: 100%;
.missionStatusLibelle {
align-items: flex-start;
justify-content: flex-start;
margin-left: 10px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
}
喜欢
<div className={styles.missionStatusLibelle}>
并将其转换为类似
const useStyles = makeStyles((theme: Theme) =>
createStyles({
missionStatus: {
display: "flex",
alignItems: "center",
height: "34px",
width: "100%",
missionStatusLibelle: {
alignItems: "flex-start",
justifyContent: "flex-start",
marginLeft: "10px",
fontSize: "14px",
fontWeight: 500,
lineHeight: "20px"
}
}
}));
但是除了使用伪选择器之外,我无法进入MissionStatusLibelle.
But i can't get to missionStatusLibelle apart from using pseudo-selectors.
const styles = useStyles();
<div className={styles.missionStatusLibelle}>
答
您想要以下内容:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
missionStatus: {
display: "flex",
alignItems: "center",
height: "34px",
width: "100%",
"& $missionStatusLibelle": {
alignItems: "flex-start",
justifyContent: "flex-start",
marginLeft: "10px",
fontSize: "14px",
fontWeight: 500,
lineHeight: "20px"
}
},
missionStatusLibelle: {}
}
));
以下是相关文档: https://cssinjs.org/jss-plugin-nested/?v=v10.0.0-alpha.24#use-rulename-to-在相同样式表中引用一个本地规则