材料用户界面-文本是否在容器/盒子之外？

ki1q1bka 于 2022-10-15 发布在 React

关注(0)|答案(3)|浏览(100)

我有一个Alert，它显示长字符串。以下是我的代码：

<Container maxWidth="md">    
<Box sx={{ mt: 3, border:1}}>
    <Box>
        {hasSubmitted ?
            <div>
                <Alert sx={{mt:3}} severity="success">
                {receivedData}
                </Alert>
            </div>
        : null}
    </Box>
</Box>
</Container>

然而，它随后显示为：

非常新的材料用户界面。我怎么才能解决这个问题呢？谢谢!

更新

我用的是这个：

<Typography
     variant="body2"
     align="center"
     style={{ wordWrap: "break-word"}}
     sx={{mt:3}}
>
      {receivedData}
</Typography>

它起作用了，但现在不是Alert了。我想问题出在Alert组件上。尽管如此，如果有人有任何解决方案，我仍然乐于接受。谢谢!

reactjs

来源：https://stackoverflow.com/questions/71677293/material-ui-text-goes-outside-the-container-box

3条答案

按热度按时间

o4tp2gmn1#

尝试使用break word css属性。Read more here

<Container maxWidth="md">    
<Box sx={{ mt: 3, border:1}}>
    <Box style={{width:'100%}}>
        {hasSubmitted ?
            <div style={{width:'100%}}>
                <Alert sx={{mt:3}} severity="success" style={{wordWrap:'break-word', width:'100%}}>
                {receivedData}
                </Alert>
            </div>
        : null}
    </Box>
</Box>
</Container>

赞(0）回复(0）举报 2022-10-15

w8rqjzmb2#

不推荐使用style道具，为了定制组件Alert Use全局类名或style Overrides属性，在您的示例中我使用了全局类名：

.MuiAlert-message {
 min-width: 0;
 word-wrap: break-word;
}

查看以下内容：https://mui.com/api/alert/#css

赞(0）回复(0）举报 2022-10-15

0sgqnhkj3#

嗨，朋友，试着用这个道具：

<container sx={{
                    maxWidth: ? ,
                    maxHeight: '100%',
                    width: '100%',
                    wordWrap: 'break-word',
                    textAlign: ?,
                    p:?,   }}>

赞(0）回复(0）举报 2022-10-15

我来回答

材料用户界面-文本是否在容器/盒子之外？

更新

3条答案

相关问题

热门标签

最新问答