When using my material-ui component, I wanted to add an ellipsis to my Typography element when it overflows. To achieve this, I defined the following styles:
const customStyles = (theme) => ({
root: {
textAlign: "left",
margin: theme.spacing(2),
paddingBottom: theme.spacing(1),
color: theme.color.secondary,
},
cardHeader: {
paddingBottom: theme.spacing(0),
},
cardContent: {
paddingBottom: theme.spacing(1),
},
rowBody: {
width: "100%",
flexWrap: "nowrap",
alignItems: "center",
display: "flex",
},
halfRow: {
width: "50%",
},
address: {
"& .MuiTypography-h5": {
textOverflow: "ellipsis",
overflow: "hidden",
},
}
I then added the "address" class to my Typography element like this:
<Typography variant="h5" className={customStyles.address}>
<a href={`https://www.google.com/maps/dir/"${location}"`}>{location}</a>
</Typography>
Despite applying the class, the ellipsis did not appear and the element continued to wrap.
https://i.stack.imgur.com/lYZA0.png
What additional steps should be taken to properly style the Typography element?