如何在资料UI选择/菜单项组件中将文本包装到下一行？(CSS问题)

Question

我在试着把学校取消的课程显示在选择菜单上。这是白天安排的：

​

然而，我的菜单只是切断溢出的文本时，在一个移动分辨率的开发工具。

热力学课被切断了。

我使用的材料ui的选择菜单与反应。材料UI选择文档我也在使用菜单项。我希望将类列出溢出到下一行。这是我每天上课的地方。

这是代码(它只是一个示例，没有运行)：

​

<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'阻止其他包装应用。您可以检查这个巴斯丁中建议的更改是如何工作的。

现在，您选择的菜单项如下：

由此：

对此：

。

Answer 2

使用ListItem而不是MenuItem

<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>
          }
        </ListItem>
        //this is just one day.  I do this for all the days.
      ) )
    }

  </Select>
</FormControl>