我从React Material-UI开始,如果高度过低,则纸部件不会使文本居中。有人可以帮忙吗?
下面有一个指向沙箱的链接,您可以看到文本太靠下而不是居中。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const styles = theme => ({
root: {
...theme.mixins.gutters(),
height: '8px',
backgroundColor: 'pink',
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
},
});
function PaperSheet(props) {
const { classes } = props;
return (
<div>
<Paper className={classes.root} elevation={1}>
ABC
</Paper>
</div>
);
}
PaperSheet.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(PaperSheet);
您可以在以下位置的沙箱中查看代码: https://codesandbox.io/s/o9k0392mj5?fontsize=14
答案 0 :(得分:1)
只需除去高度,如果您不喜欢其中的填充量,也许可以更改填充物。
此沙箱显示了几个填充较少或填充为零的示例:https://codesandbox.io/s/jjmxnmr7kw。