Using material ui createStyles

Question

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.

I understand the basics of the createstyles b

Answer 1

You want something like the following:

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

Here's the relevant documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.0-alpha.24#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet