[英]In MaterialUI, how do I apply a class to my Typography element?
In my material-ui component, I want to create an ellipsis when my Typography element overflows.在我的 material-ui 组件中,我想在我的 Typography 元素溢出时创建一个省略号。 I created these styles...
我创建了这些 styles...
const styles = (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",
},
}
and I applied the "address" class to my Typography element like so我将“地址” class 应用于我的排版元素,如下所示
<Typography variant="h5" className={classes.address}>
<a href={`https://www.google.com/maps/dir/"${location}"`}>{location}</a>
</Typography>
However, the ellipsis is not appearing and the element is wrapping但是,省略号没有出现并且元素正在换行
What else do I need to do to apply a style to my Typography element?我还需要做什么才能将样式应用于我的 Typography 元素?
Your address class should be added to the parent of the Typography component else the style chaining won't work.您的地址 class 应添加到 Typography 组件的父级,否则样式链接将不起作用。
address: {
"& .MuiTypography-h5": {
textOverflow: "ellipsis",
overflow: "hidden",
},
}
What it means is that find a class.MuiTypography-h5 inside address class and apply the style but there isn't any.这意味着在地址 class 内找到一个 class.MuiTypography-h5 并应用该样式但没有任何样式。
Also I recommend you use makeStyles to create styles.另外我推荐你使用 makeStyles 来创建 styles。
const styles = makeStyles(theme => ({
address: {
"& .MuiTypography-h5": {
textOverflow: "ellipsis",
overflow: "hidden"
}
}
}));
export default function App() {
const classes = styles();
return (
<div className={classes.address}>
<Typography variant="h5">
126 Phillips Key Suite 042 West Kentucky
</Typography>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.