如何减少Material-UI中ListSubheader的高度？

Question

我有一个

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

在List中。

设置样式如下：

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

但结果如下：

为什么文本不在宽限框中？我该如何预防？

这里是整个代码：

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

Answer 1

需要设置：

lineHeight: "22px"