Material UI v4.12 Select组件显示异常且无控制台报错，请求排查原因

我帮你排查了代码，很快就找到了导致Select组件显示异常的核心问题，还有一个小细节可以优化：

1. 最关键的错误：Select组件导入错误 #

看你的代码里这一行：

import Select from "@material-ui/core/InputLabel";

你把Select组件错误地导入成了InputLabel！这意味着你实际渲染的是一个InputLabel而非Select组件，自然会完全不符合预期，而且因为没有语法错误，控制台也不会报错。

正确的导入应该是：

import Select from "@material-ui/core/Select";

2. 可选优化：useStyles的定义位置 #

虽然这不是导致显示异常的直接原因，但你把useStyles定义在了组件TestPage内部，每次组件渲染时都会重新创建这个样式钩子函数，可能会带来不必要的性能开销。建议把它移到组件外部：

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

function TestPage() {
  // ... 组件内部逻辑
}

修正后的完整代码 #

import React, { useState } from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select"; // 这里修正了导入
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core";

// 把useStyles移到组件外部
const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

const mockData = ["list01", "list02"];

function TestPage() {
  const classes = useStyles();
  const [data, setData] = useState("");

  return (
    <div className="test">
      <h2>TEST</h2>
      <FormControl
        variant="outlined"
        classes={{ root: classes.formControl }}
      >
        <InputLabel id="demo-simple-select-outlined-label">
          Select list
        </InputLabel>
        <Select
          id="test-select-outlined"
          value={data}
          onChange={(e) => setData(e.target.value)}
          label="Select list"
        >
          {mockData.map((item, index) => (
            <MenuItem key={index + 1} value={item}>
              {item}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

export default TestPage;

把这两个修改完成后，你的Select组件应该就能正常显示和工作了！

内容的提问来源于stack exchange，提问作者Stef-Lev