如何在ReactJS Material UI中使用useStyle？

问题描述

我已经制作了一个单独的useStyle文件，并想在材质ui的useStyle中使用此自定义CSS。如何实现？

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

解决方法

假设您的useStyles文件看起来像这样：

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

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

export default useStyles;

回到您的组件，只需导入此文件并将其附加到父目录，即可在其中隐藏其所有input和radio类型的子项checkbox

import useStyles from "./useStyles";

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

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