如何设置Material-UI MenuItem宽度？

Question

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

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

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

Answer 1

使用ThemeProvider，并覆盖MuiList根宽度：

class App : LifeCycleDelegate {
....
....

override fun onAppDestroyed(p0: Activity?) {
    val intent = Intent(p0, MyService::class.java)
    p0?.stopService(intent)
 }
}

并且比您的组件中的

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

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

有效的CodeSandbox示例：https://codesandbox.io/s/material-demo-5sbjw?fontsize=14