如何减少Material-UI中ListSubheader的高度? [英] How to reduce height of ListSubheader in Material-UI?
本文介绍了如何减少Material-UI中ListSubheader的高度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个
<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屋!
查看全文