CODEWITHSUNDEEP
javascriptreactjslistmaterial-ui
levraininjaneer
levraininjaneer

Reputation: 1377

material ui: how to change fontSize in Lists?

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>
  );
}

Upvotes: 26

Views: 46786

Answers (7)

Vidya Jayagouda
Vidya Jayagouda

Reputation: 1

In material ui 5 mentioned in the doc mui-5 we can change the ListText styles mentioned in how to change the in below code 

import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import LockIcon from '@mui/icons-material/Lock';
import ChannelActionMenu from './ChannelActionMenu';
import styles from './Forum.module.css';
import classNames from 'classnames';
import { styled } from '@mui/material/styles';

const CustomList = styled( List )( {
  '& .MuiListItem-root': {
    borderRadius: '5px',
    paddingLeft: '10px',
    paddingRight: '10px'
  },
  '& .MuiListItemIcon-root': {
    color: '#CBCBE5',
    cursor: 'pointer',
    minWidth: '34px'
  },
  '& .MuiSvgIcon-root': {
    fontSize: 20
  },
  '& .MuiListItemText-primary': {
    fontSize: '16px',
    color: '#ffffff',
    textTransform: 'capitalize',
    fontWeight: 700,
    fontFamily: 'Lato',
    lineHeight: '24px'
  }
} );
const ListComponent = () =>
{
 const channels = [
{ id: 1, name: 'abc'},
{ id: 2, name: 'xyz'}
]

  return (
    <>
      <CustomList className={ styles.channelList }>
        { channels.map( ( channel ) => (
          <ListItem>
           <ListItemText primary={ channel.name } />
            <ChannelActionMenu
              permissions={ selectedChannel?.permissions }
            />
          </ListItem>
        ) )
        }
      </CustomList >
    </>
  );
};

export default ChannelList;

Upvotes: 0

Marlon
Marlon

Reputation: 1

You can add whatever style you need to the primary text. Just follow the sx valid sintaxis

<ListItem><span style={{ fontSize: "0.85rem" }}>{Text}</span></ListItem>

Upvotes: 0

ritz
ritz

Reputation: 5706

For mui v5, use primaryTypographyProps prop to pass desired styles

<ListItemText 
    primaryTypographyProps={{fontSize: '18px'}} 
    primary="List Text"
/>

Upvotes: 34

Opeoluwa Iyi-Kuyoro
Opeoluwa Iyi-Kuyoro

Reputation: 103

I noticed that that the LinkItemText uses Typography under the hood which overrides the font size you set. You can remove the typography with the disableTypography prop.

<ListItemText sx={{ fontSize: "..." }} disableTypography >{text}</ListItemText>

Upvotes: 5

user12163165
user12163165

Reputation: 627

it is actually very easy to do using className,

<ListItemText className="artist" primary={props.song.artist} />

css

.artist {
    transform: scale(.8) // scale down
    -webkit-transform-origin-x: 0; // align text left after scaling
}

enjoy!

Upvotes: -1

Casey J
Casey J

Reputation: 61

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>

Upvotes: 6

shiva
shiva

Reputation: 3941

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.

Upvotes: 20

Related Questions