I am creating some forms using react js and material UI.
I would like to make the font size on some of the lists smaller in order to get a more compact presentation, but no matter at which level I added the code fontSize={10}
it seems to have no effect.
How can I change the fontSize?
Here is some example code, which I got from the Sandbox on the Material UI documentation.
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>
);
}
As the docs of ListItemText says you can override the primary
text styles using classes
props and primary
key.
Create a style
const styles = theme => ({
listItemText:{
fontSize:'0.7em',//Insert your required size
}
});
Apply the style to ListItemText
<ListItemText
classes={{primary:classes.listItemText}}
primary="Inbox" />
If you want to override the secondary font size apply styles to secondary key.