Material-UI Paper component does not center the text

Question

I am starting out with React Material-UI, the paper component does not center the text if the height is low. Can anyone help?

There is a link to a sandbox below, you can see the text is too far down, not in the center.

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

You can see the code in the sandbox here: https://codesandbox.io/s/o9k0392mj5?fontsize=14

You are setting the height to be less than the text height. What are you trying to achieve? If you just remove the height, the height will automatically be the height of the text plus the height of the padding. — Ryan Cogswell
But I want it to be shorter - and the text fits on perfectly well - isn't there a way to center it? — Sem

Abdallatif Sulaiman Abdallatif Sulaiman · Accepted Answer · 2019-04-06T18:20:47

Just remove the height, maybe you can change the padding if you don't like how much padding there is.

This sandbox shows a couple examples with less padding or zero padding: https://codesandbox.io/s/jjmxnmr7kw.

Material-UI Paper component does not center the text

1 Answers