How to use useStyle in ReactJS Material UI?

Question

I have made a separate useStyle file and want to use this custom css in useStyle of material ui. How to achieve that?

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

Answer 1

Let's say your useStyles file looks something like this:

import makeStyles from "@material-ui/core/styles/makeStyles";

const useStyles = makeStyles({
  hideCheckboxAndRadio: {
    "& input[type='checkbox'], & input[type='radio']": {
      display: "none"
    }
  }
});

export default useStyles;

Back on your components, just import this file and attach it to a parent where you want all of its children input of type radio & checkbox to be hidden

import useStyles from "./useStyles";

function App() {
  const classes = useStyles();

  return (
    <div className={classes.hideCheckboxAndRadio}>
      <input type="text" />
      <input type="checkbox" />
      <input type="radio" />
    </div>
  );
}