如何设置 Material-UI MenuItem 的宽度？

【问题标题】：How to set Material-UI MenuItem width?如何设置 Material-UI MenuItem 的宽度？
【发布时间】：2019-09-01 02:15:29
【问题描述】：

我有一个带有Material-UI 的菜单，为什么要使用整个屏幕宽度？如何限制只使用文本长度所需的空间？

我尝试将 div 元素放在 MenuList 周围，但没有帮助。

class MainPage extends React.Component {
  render() {
    return (
      <div>
      <MenuList>
        <MenuItem>Profile</MenuItem>
        <MenuItem>My account</MenuItem>
        <MenuItem>Logout</MenuItem>
      </MenuList>

【问题讨论】：

stackoverflow.com/questions/57742857/…

标签： reactjs material-ui

【解决方案1】：

使用 ThemeProvider，并覆盖 MuiList-root 宽度：

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
  overrides: {
    MuiList: {
      root:{
      width: 'fit-content'
      }
    }
  }
});

比在你的组件中：

 <div>
      <ThemeProvider theme={theme}>
        <MenuList>
          <MenuItem>Profile</MenuItem>
          <MenuItem>My account</MenuItem>
          <MenuItem>Logout</MenuItem>
        </MenuList>
      </ThemeProvider>
</div>

工作代码沙盒示例：https://codesandbox.io/s/material-demo-5sbjw?fontsize=14

【讨论】：