如何在ReactJS Material UI中使用useStyle？及引入自定义CSS

嘿，我来帮你搞定这两个Material UI里useStyles的问题，一步步说清楚：

首先得区分你用的是Material UI v4还是v5，不过核心思路差不多，我都给你说明白：

第一步：准备依赖 #

• 如果你用的是v4：确保已经安装了核心包：npm install @material-ui/core
• 如果你用的是v5：默认用Emotion作为样式方案，useStyles属于兼容包，需要额外安装：npm install @mui/material @emotion/react @emotion/styled @mui/styles

第二步：定义样式钩子 #

创建一个样式钩子，用makeStyles来写你的自定义样式，还能通过theme参数访问Material UI的内置主题变量（比如间距、颜色）：

// 导入makeStyles
// v4版本
import { makeStyles } from '@material-ui/core/styles';
// v5版本
import { makeStyles } from '@mui/styles';

// 定义样式
const useStyles = makeStyles((theme) => ({
  card: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(3),
    borderRadius: 12,
    boxShadow: theme.shadows[3],
  },
  cardTitle: {
    fontSize: 24,
    fontWeight: 600,
    marginBottom: theme.spacing(2),
  },
}));

第三步：在组件中使用 #

在组件里调用这个钩子拿到类名，然后给元素加上对应的className就行：

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

  return (
    <div className={classes.card}>
      <h2 className={classes.cardTitle}>这是一个Material UI卡片</h2>
      <p>内容示例</p>
    </div>
  );
}

export default MyCard;

你已经把useStyles放在独立文件里了，那可以通过两种方式实现需求，看你是要全局生效还是局部生效：

方式1：全局隐藏所有原生复选框/单选框 #

如果想让整个应用里的原生input[type="checkbox"]和input[type="radio"]都隐藏，用@global规则就行，这个规则会把样式注入到全局样式表：

// 比如你的独立文件：styles.js
import { makeStyles } from '@mui/styles'; // v4的话用@material-ui/core/styles

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

export default useStyles;

然后在你的根组件（比如App.js）里导入并调用这个钩子，不需要给任何元素加类名，调用后全局样式就生效了：

import useStyles from './styles';

function App() {
  useStyles(); // 执行后全局的原生复选框/单选框就被隐藏了

  return (
    <div className="App">
      {/* 这里的原生input都会被隐藏 */}
    </div>
  );
}

方式2：只隐藏某个组件内的原生复选框/单选框 #

如果不想影响全局，只想针对特定容器内的元素，用嵌套选择器就行，给容器加一个类名，然后通过&来选择容器内的目标元素：

// styles.js
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles(() => ({
  formWrapper: {
    padding: '20px',
    border: '1px solid #eee',
    // 嵌套选择器：只针对这个容器内的复选框/单选框
    '& input[type="checkbox"], & input[type="radio"]': {
      display: 'none',
    },
  },
}));

export default useStyles;

然后在组件里把这个类名加到容器上：

import useStyles from './styles';

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

  return (
    <div className={classes.formWrapper}>
      {/* 这个容器里的原生复选框/单选框会被隐藏 */}
      <input type="checkbox" id="agree" />
      <label htmlFor="agree">同意条款</label>

      <input type="radio" id="male" name="gender" />
      <label htmlFor="male">男</label>
    </div>
  );
}

小提示：如果你用的是Material UI自带的<Checkbox>或<Radio>组件，它们本身已经把原生输入隐藏了，用的是自定义的视觉样式，所以这种情况你根本不需要自己写这段CSS～

内容的提问来源于stack exchange，提问作者theWanderer