Material UI - Text goes outside the Container/Box?

user_18034508 0
Viewed 287

I have an Alert where it displays long strings. Here is my code:

<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>

However it then shows up like this: Text goes out

Very new to Material UI. How can I fix this? Thank you!

Update

I used this instead:

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

It works but it's not an Alert now. I think the problem is on the Alert component. Still if anyone has any solutions, I'm still open for them. Thank you!

material-ui reactjs javascript
2 Answers

try using the break word css property. 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>
user_66518400

It's not recommended to use style prop, in order to customize the component Alert use global class name or styleOverrides property, in your example I used global class name:

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

Check this: https://mui.com/api/alert/#css

user_114985680
Related