How to set Material-UI MenuItem width?

问题

I have a Menu with Material-UI, why is the whole screen width used? How can I limit to use only the text length needed space?

I tried to put div element around MenuList but it did not help.

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

回答1:

Use ThemeProvider, and override the MuiList-root width:

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

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

And than in your component:

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

Working CodeSandbox example: https://codesandbox.io/s/material-demo-5sbjw?fontsize=14

来源：https://stackoverflow.com/questions/57742775/how-to-set-material-ui-menuitem-width