Material-UI MenuItem高度无法修改问题求助

嘿，我之前也踩过这个坑！Material-UI的MenuItem组件自带了不少默认样式，有时候直接传style或者innerDivStyle会因为优先级不够被覆盖，试试下面这几个靠谱的解决方案：

1. 用Material-UI官方推荐的样式钩子（最推荐） #

如果你的组件是函数组件，用makeStyles或者useStyles来定义样式，这样样式会和Material-UI的样式系统深度整合，优先级更高，还不用写!important：

import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';

const useStyles = makeStyles({
  customMenuItem: {
    // 先覆盖MenuItem本身的最小高度和高度
    minHeight: '20px',
    height: '20px',
    // 去掉默认的上下padding，避免撑开高度
    paddingTop: 0,
    paddingBottom: 0,
    // 再控制内部的innerDiv元素
    '& .MuiMenuItem-innerDiv': {
      minHeight: '20px',
      height: '20px',
      // 确保内容垂直居中，不然会错位
      alignItems: 'center',
    },
  },
});

// 在你的组件里使用
function YourComponent() {
  const classes = useStyles();
  return (
    <MenuItem
      className={classes.customMenuItem}
      value={itemValue}
      primaryText={(multiple && withCheckboxes) ? '' : itemNode}
      key={index}
    >
      here is checkbox
    </MenuItem>
  );
}

2. 自定义CSS类配合!important（应急方案） #

如果你不想用样式钩子，也可以写普通的CSS类，用!important强制覆盖默认样式（尽量少用，但应急很管用）：

/* 全局CSS文件里添加 */
.custom-menu-item {
  height: 20px !important;
  min-height: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.custom-menu-item .MuiMenuItem-innerDiv {
  height: 20px !important;
  min-height: 20px !important;
}

然后给MenuItem加上className="custom-menu-item"就行。

3. 检查DevTools找到真正的样式来源 #

打开Chrome DevTools，选中MenuItem元素，看看Styles面板里是哪个类在控制高度——通常是.MuiMenuItem-root的min-height或者padding在搞鬼。有时候光改height没用，必须把min-height也改成20px，同时调整上下padding，这样才能真正把高度压下去。

另外要注意：如果用的是较旧版本的Material-UI，innerDivStyle这个prop可能已经被废弃了，官方推荐用className或者样式钩子来控制内部元素~

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