如何将文本换行到 Material UI 选择/菜单项组件中的下一行？（CSS问题）

Question

我试图在选择菜单中显示学校取消的课程。按天安排：

但是，当开发人员工具中的移动分辨率时，我的菜单只会截断溢出文本。 热力学课被砍掉了。

我正在使用 Material ui 的选择菜单和 React。Material UI Select 文档我也在使用菜单项。我想让列出的类溢出到下一行。这是我每天展示课程的地方。

这是代码（这只是一个示例，它不会运行）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<FormControl className={classes.formControl}>
      <InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
     
      <Select
        labelId="demo-controlled-open-select-label"
        id="demo-controlled-open-select"
        open={open}
        onClose={handleClose}
        onOpen={handleOpen}
          defaultValue={subjectFilter}
          onChange={handleChangeSubject}
        className="styleSelect"

        >
         {item.SUBJECT === 'OPEN_LEARNING' && 
               <ul className ="stylingList">
               {(state.subjects) && state.subjects.filter(item => 
               (item.SUBJECT === 'OPEN_LEARNING')).map(item => 
                 <li className ="stList">
                   {item.CLASS_FULL}
                 </li>
                 )}
                 </ul>
              }
            </MenuItem>
            //this is just one day.  I do this for all the days.
          ) )
        }
     
        </Select>
      </FormControl>

我在列出的类中没有样式。我只是创建了类名称，以便稍后根据需要自定义区域。我刚刚更改了文字颜色。谢谢。我尝试过溢出换行：断字；在 li 类（stList）上，但它没有使单词转到下一行。

Answer 1

TL;DR：覆盖菜单项的环绕样式：

const useStyles = makeStyles((theme) => ({
  root: {
    whiteSpace: "unset",
    wordBreak: "break-all"
  }
}));
//...
const YourComponent =(props)=>{
    const classes = useStyles();
    //...
    <MenuItem  classes={{ root: classes.root }}>
}

NL;PR：默认情况下，菜单项样式whiteSpace: 'nowrap'会阻止应用其他换行。您可以在此pastebin中检查建议的更改如何工作。

现在，您选择的菜单项将变为：

由此： 对此：。