How to reduce height of ListSubheader in Material-UI?

问题

I have a

<ListSubheader className={this.props.classes.listSubHeaderRoot}>Teszt Színház</ListSubheader>

in a List.

And set style like:

const styles = theme => ({
// ...
  listSubHeaderRoot: {
    backgroundColor: '#E5E5E5',
    color: '#252525',
    height: '22px'
    /* To change the font, use the fontFamily rule */
  }
})

but result looks like:

Why text is out of the grace box? How can I prevent it?

Here the whole code:

import React, { Component } from "react";
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ArrowForwardIos from '@material-ui/icons/ArrowForwardIos';
import ListSubheader from '@material-ui/core/ListSubheader';
import Switch from '@material-ui/core/Switch';
import TextField from '@material-ui/core/TextField';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import FolderIcon from '@material-ui/icons/Folder';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import DeleteIcon from '@material-ui/icons/Delete';
import IconButton from '@material-ui/core/IconButton';
import Box from '@material-ui/core/Box';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  listSubHeaderRoot: {
    backgroundColor: '#E5E5E5',
    color: '#252525',
    height: '22px'
    /* To change the font, use the fontFamily rule */
  }
})

class App extends Component {
  render() {
    return <div>
    <ListSubheader className={this.props.classes.listSubHeaderRoot}>Teszt Színház</ListSubheader>
    <ListItem button>
    <Box textAlign="left" style={{width: 150 }}>Teszt Esemény</Box>
    <ListItemText secondaryTypographyProps={{ align: "right" }} secondary=""/>
    <IconButton edge="end" aria-label="delete">
    <ArrowForwardIos />
    </IconButton>
    </ListItem>
    </div>;
}
}

export default withStyles(styles)(App);

回答1:

Need to set:

lineHeight: "22px"

来源：https://stackoverflow.com/questions/59026812/how-to-reduce-height-of-listsubheader-in-material-ui

标签

reactjs

material-ui