如何让嵌套在Alert/AlertTitle内的Typography组件的noWrap生效？

问题原因 #

在MaterialUI v4里，AlertTitle的默认样式是display: inline-block，不会自动填满父容器宽度，导致内部的Typography没有明确的宽度约束，noWrap属性依赖的截断规则（white-space: nowrap; overflow: hidden; text-overflow: ellipsis;）无法触发。

解决方案 #

以下几种方法都能解决这个问题，同时保留你原有的组件嵌套结构：

方法1：直接给AlertTitle设置样式

<MenuItem>
  <Alert style={{ width: 300 }}>
    <AlertTitle style={{ display: 'block', width: '100%' }}>
      <Typography variant="inherit" noWrap>
        这里是需要截断的超长文本内容，测试是否能显示省略号
      </Typography>
    </AlertTitle>
  </Alert>
</MenuItem>

方法2：用makeStyles自定义样式（更符合MaterialUI规范）

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  fullWidthTitle: {
    display: 'block',
    width: '100%',
  },
});

// 组件内部使用
const classes = useStyles();

<MenuItem>
  <Alert style={{ width: 300 }}>
    <AlertTitle className={classes.fullWidthTitle}>
      <Typography variant="inherit" noWrap>
        这里是需要截断的超长文本内容，测试是否能显示省略号
      </Typography>
    </AlertTitle>
  </Alert>
</MenuItem>

方法3：直接给Typography添加强制样式

<MenuItem>
  <Alert style={{ width: 300 }}>
    <AlertTitle>
      <Typography 
        variant="inherit" 
        noWrap
        style={{ width: '100%', display: 'block' }}
      >
        这里是需要截断的超长文本内容，测试是否能显示省略号
      </Typography>
    </AlertTitle>
  </Alert>
</MenuItem>

所有方法的核心逻辑都是让Typography获得明确的宽度限制，从而触发noWrap对应的截断样式。

内容的提问来源于stack exchange，提问作者iducam