How to set Material-UI MenuItem width?

Question

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>

https://stackoverflow.com/questions/57742857/const-can-not-be-defined-in-class-in-node — János, Sep 01 '19 at 02:42

score 1 · Accepted Answer · answered Sep 01 '19 at 06:54

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

How to set Material-UI MenuItem width?

1 Answers1

Linked