Javascript 如何让noWrap在嵌套在AlertAlertTitle组件中的排版组件中工作

发布于01月04日

我试图让Typography组件正确地截断带有省略号的溢出文本，但当它嵌套在Alert组件中时，它不起作用.以下是我所拥有的内容的示例片段:

<MenuItem>
  <Alert style={{ width: 300 }}>
    <AlertTitle>
      <Typography variant="inherit" noWrap>
        Here is my text.
      </Typography>
    </AlertTitle>
  </Alert>
</MenuItem>

根据MaterialUIv4(我正在使用的)的文档，noWrap属性只适用于块或内联元素.我try 将该属性添加到Alert、AlertTitle和Typography组件，但似乎都不能正确截断文本.我可以将菜单项设置为看起来像Alert，这样我就不需要将Typography嵌套在Alert中，但如果可能的话，我更喜欢保持上面的 struct .

推荐答案

在v5的Material-UI中，您的代码运行得很好.要使其在v4中运行相同，您需要进行两个调整:

在Typography元素上指定component="p".在v4中，它缺省为"span"，不支持noWrap
为Alert内的message CSS class指定overflow: "auto"

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles((theme) => ({
  alert: {
    "& .MuiAlert-message": {
      overflow: "auto",
    },
  },
}));

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

  return (
    <Alert style={{ width: 300 }} className={classes.alert}>
      <AlertTitle>
        <Typography variant="inherit" noWrap component="p">
          Here is my text and now it is getting too long to fit.
        </Typography>
      </AlertTitle>
    </Alert>
  );
}

https://codesandbox.io/p/sandbox/alert-typography-nowrap-w5768q?file=%2Fdemo.js%3A1%2C1-28%2C1个