javascript 如何让noWrap在嵌套在Alert/ AlertTitle组件中的Typography组件中工作？

kxe2p93d 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(141)

我试图让Typography组件正确地截断溢出的文本与省略号，但它不工作时，嵌套在Alert组件。这里是一个示例片段，我有：

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

字符串
根据MaterialUI v4的文档（我正在使用），noWrap属性只对块或内联元素起作用。我试过将该属性添加到Alert，AlertTitle和Typography组件中，我可以将菜单项设置为Alert的样式，这样就不需要将Typography嵌套在Alert s，但如果可能的话，我宁愿保留上面的结构。

JavaScript

来源：https://stackoverflow.com/questions/77755766/how-can-i-get-nowrap-to-work-in-a-typography-component-nested-inside-an-alert-a

1条答案

按热度按时间

b1payxdu1#

在Material-UI的v5中，你的代码工作得很好。要使它在v4中工作得一样，你需要做两个调整：

在Typography元素上指定component="p"。在v4中默认为“span”，不支持noWrap
为Alert中的message CSS类指定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

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 如何让noWrap在嵌套在Alert/ AlertTitle组件中的Typography组件中工作？

1条答案

相关问题

热门标签

最新问答