材质UI列表，ListItemText中没有WRAP挑战

Question

有没有办法在ListItemText中不换行？

我只需要ListItemText来剪切单词而无需任何扩展或滚动。

谢谢

Answer 1

是的，可以通过覆盖当前样式或向ListItemText组件添加内联样式来实现。

这里是内联样式的示例

<ListItemText 
        style={{whiteSpace: "nowrap"}}
         primary="Sent mail Sent mail Sent mail Sent mail Sent mail Sent mail Sent mail" />
      </ListItem>

并且为了覆盖当前样式，如文档所述（https://material-ui.com/customization/components/），需要从makeStyles开始使用。

这里是我的替代代码：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ListSubheader from '@material-ui/core/ListSubheader';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import SendIcon from '@material-ui/icons/Send';



const useStyles = makeStyles(theme => ({
  ListItemRoot:{
    whiteSpace: "nowrap"
  },
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },

}));

export default function NestedList() {
  const classes = useStyles();

  return (
    <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
      className={classes.root}
    >
      <ListItem button>
        <ListItemIcon>
          <SendIcon />
        </ListItemIcon>
        <ListItemText 
        classes={{root: classes.ListItemRoot}}
         primary="Sent mail Sent mail Sent mail Sent mail Sent mail Sent mail Sent mail" />
      </ListItem>
    </List>
  );
}