如何在 ReactJS Material UI 中使用 useStyle？

【问题标题】：How to use useStyle in ReactJS Material UI?如何在 ReactJS Material UI 中使用 useStyle？
【发布时间】：2021-02-01 23:08:12
【问题描述】：

我做了一个单独的useStyle文件，想在材质ui的useStyle中使用这个自定义css。如何实现？

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

【问题讨论】：

标签： javascript reactjs material-ui material-table

【解决方案1】：

假设您的 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>
  );
}

【讨论】：