物料界面:如何更改列表中的fontSize？
物料界面:如何更改列表中的fontSize？
提问于 2018-08-12 01:04:16
我正在使用react js和material UI创建一些表单。我想让一些列表上的字体更小，以获得更紧凑的表示，但无论我在哪个级别添加代码fontSize={10}，似乎都没有任何效果。
如何更改fontSize？
以下是我从Material UI documentation上的Sandbox获得的一些示例代码。
const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
});
function FolderList(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List>
<ListItem>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<ListItem>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
</List>
</div>
);
}回答 5
Stack Overflow用户
回答已采纳
发布于 2018-08-12 01:25:18
正如ListItemText的docs所说，您可以使用primary属性和classes键覆盖primary文本样式。
创建样式
const styles = theme => ({
listItemText:{
fontSize:'0.7em',//Insert your required size
}
});
将样式应用于ListItemText
<ListItemText
classes={{primary:classes.listItemText}}
primary="Inbox" />
如果要覆盖辅助字体大小，请将样式应用于辅助键。
Stack Overflow用户
发布于 2021-11-22 20:32:53
对于mui v5，使用primaryTypographyProps prop传递所需的样式
<ListItemText
primaryTypographyProps={{fontSize: '18px'}}
primary="List Text"
/>Stack Overflow用户
发布于 2020-06-30 08:20:05
const useStyles = makeStyles({
item: {
color: theme.palette.secondary.main,
'& span, & svg': {
fontSize: '3rem'
}
}
});
const classes = useStyles();
<MUIListItem>
<MUIListItemIcon className={classes.item}>some_icon</MUIListItemIcon>
<MUIListItemText className={classes.item} primary="some text" />
</MUIListItem>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51801916
复制相关文章
相似问题