Using one instead of multiple makeStyles hooks

Question

I am using makeStyles hook in App.js to add styles for the component. Currently, I am using three makeStyles hooks in one component. Is this possible to apply styles of three hooks by using one main hook. I am not sure if I am using the best approach. If someone can help me out, I appreciate it.

App.js

const useStyles = makeStyles({
btn: {
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 45,
    paddingRight: 45,
    fontWeight: 600
  },
  gridMargin: {
    margin: "auto"
  },
  topGrid: {
    marginTop: "0.5rem",
  },
  marginRight: {
    marginRight: "4rem"
  }
})

const useTextFieldStyles = makeStyles({
  root: {
    fontWeight: "bold"
  }
},{ name: "MuiInputBase" })

const useMuiFormLabel = makeStyles({
  root: {
    fontSize: "1.1rem",
    color: "#B0B0B0",
    top: "-13px",
    '&$focused': {
      color: "#B0B0B0",
      fontSize: "1.1rem",
      top: "-13px"
    },
  },
  focused: {},
},{ name: "MuiFormLabel" })

const Login = (props) => {
  const classes = useStyles();
  const textFieldStyles = useTextFieldStyles();
  const textFieldLabel = useMuiFormLabel();

  return (
      <Grid>
       <Grid item xs={12} md={12}>
         <TextField 
           className={textFieldStyles.root}
           aria-label="username"
           label="Username"
           name="username"
           type="text"
           fullWidth
           required
           InputLabelProps={{ required: false, classes: { root: textFieldLabel.root, focused:textFieldLabel.focused } }}
          />
         </Grid>
         <Grid item xs={12} md={12}>
            <TextField 
              label="Password"
              aria-label="password"
              type="password"
              name="password"
              color="primary"
              fullWidth
              required
              className={textFieldStyles.root}
              InputLabelProps={{ required: false, classes: { root: textFieldLabel.root, focused: textFieldLabel.focused } }}
            />
     </Grid>
   </Grid>
  );
};

score 0 · Answer 1 · answered May 03 '21 at 06:08

As textField component consists of six components and to override the styles of a particular component, I have to select that component using props given for the component in the textField rather putting styles on className prop of textField The above code can be refactored as:-

const useStyles = makeStyles({
      btn: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 45,
        paddingRight: 45,
        fontWeight: 600
      },
      gridMargin: {
        margin: "auto"
      },
      topGrid: {
        marginTop: "0.5rem",
      },
      marginRight: {
        marginRight: "4rem"
      },
      textFieldWeight: {
        fontWeight: "bold"
      },
      formLabelStyles: {
        fontSize: "1.1rem",
        color: "#B0B0B0",
        top: "-13px",
        '&$focused': {
          color: "#B0B0B0",
          fontSize: "1.1rem",
          top: "-13px"
        },
      },
      focused: {},
    })

    const Login = (props) => {
      const classes = useStyles();
      return (
      <Grid>
       <Grid item xs={12} md={12}>
         <TextField 
           aria-label="username"
           label="Username"
           name="username"
           type="text"
           fullWidth
           required
           InputProps={{ classes: { root: classes.textFieldWeight } }}
           InputLabelProps={{ required: false, classes: { root: classes.formLabelStyles, focused: classes.focused } }}
          />
         </Grid>
         <Grid item xs={12} md={12}>
            <TextField 
              label="Password"
              aria-label="password"
              type="password"
              name="password"
              color="primary"
              fullWidth
              required
              InputProps={{ classes: { root: classes.textFieldWeight } }}
              InputLabelProps={{ required: false, classes: { root: classes.formLabelStyles, focused: classes.focused } }}
            />
     </Grid>
   </Grid>
  );

}

Using one instead of multiple makeStyles hooks

1 Answers1