如何减少Material-UI中ListSubheader的高度? [英] How to reduce height of ListSubheader in Material-UI?

问题描述

我有一个

<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 */
  }
})

但结果如下:

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

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

这里是整个代码:

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

推荐答案

需要设置:

lineHeight: "22px"

这篇关于如何减少Material-UI中ListSubheader的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！