如何在 MUI MenuItem 中换行文本？

Question

所以我需要在弹出窗口中显示一些文本。我有以下代码使文本显示在一行中。由于 UI 原因，我需要将文本换行以多行显示，但到目前为止我的更新还没有成功。有什么想法吗？

<Popover
  anchorEl={target}
  open={open}
  anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
  targetOrigin={{ horizontal: 'left', vertical: 'bottom' }}
  onRequestClose={handleRequestClose}
  animation={PopoverAnimationVertical}
>
  <Menu autoWidth={true}>
    <MenuItem style={{ width: '200px', height: '200px' }}>
      <p style={{ display: 'flex', flexWrap: 'wrap' }}>
        'aslkjflajdsljflskdjflsdfjlsjdfjdfjlasjkfadlsf'
      </p>
    </MenuItem>
    //this does not work....
  </Menu>
</Popover>

Answer 1

尝试重置 whiteSpace 样式 --

 <MenuItem style={{whiteSpace: 'normal'}}>  
   <p>This song is just six words long. This song is just six words long.  This song is just six words long.  This song is just six words long.</p> 
 </MenuItem>

Answer 2

您可以像下面这样设置whiteSpace property to normal in the MenuList component using sx prop：

<Menu
  {...}
  MenuListProps={{
    sx: {
      width: 230,
      '& .MuiMenuItem-root': {
        whiteSpace: 'normal',
      },
    },
  }}
>

如果您希望应用中的每个 MenuItem 都对长文本进行换行，您也可以在 createTheme:

中进行设置

const theme = createTheme({
  components: {
    MuiMenuItem: {
      styleOverrides: {
        root: {
          whiteSpace: 'normal',
        },
      },
    },
  },
});

如何在 MUI MenuItem 中换行文本？

How to wrap text in MUI MenuItem?

css

reactjs

material-ui