如何将文本换行到 material UI select/menu 项目组件中的下一行？（CSS 问题）

Question

我正在尝试在 select 菜单中显示学校取消的 classes。这是按天安排的：

但是，在开发者工具中使用移动分辨率时，我的菜单只是截断了溢出文本。热力学class被截断

我正在使用 material ui 的 select 菜单和 React。 Material UI Select documentation I'm also using the menu item。我想让 classes 列出溢出到下一行。这是我每天显示 classes 的地方。

这是代码（这只是一个例子，并不是运行）：

<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>

我在列出的 class 中没有样式。如果需要，我只是制作了 class 名称以自定义这些区域。我只是改变了文字颜色。谢谢。我试过 overflow-wrap: break-word;在 li class (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.

中检查建议的更改是如何工作的

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

来自这里： to this: .

Answer 2

使用 ListItem 而不是 MenuItem

按天筛选类

    >
     {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>

如何将文本换行到 material UI select/menu 项目组件中的下一行？（CSS 问题）

How do you wrap text to the next line in a material UI select/menu item component? (CSS issue)

css

styling

reactjs

material-ui

如何将文本换行到 material UI select/menu 项目组件中的下一行？ （CSS 问题）

How do you wrap text to the next line in a material UI select/menu item component? (CSS issue)

css

styling

reactjs

material-ui

如何将文本换行到 material UI select/menu 项目组件中的下一行？（CSS 问题）