使用材质 ui createStyles答案

【问题标题】：Using material ui createStyles使用材质 ui createStyles
【发布时间】：2020-01-12 06:30:34
【问题描述】：

我正在尝试将我的 css 从一个 less 文件转换为材质 createStyles，但我无法理解它是如何工作的。

我了解 createstyles 的基础知识，但我的子选择器无法正常工作

我想要的只是能够访问 css 类任务StatusLibelle

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

const styles = useStyles();
<div className={styles.missionStatusLibelle}>

【问题讨论】：

标签： reactjs typescript less material-ui jss

【解决方案1】：

你想要类似下面的东西：

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

【讨论】：