Материал UI Card Содержимое карты не центрируется

Question

Я работаю в интерфейсе материалов и создал карточку, в которой я хочу центрировать текст по горизонтали и вертикали. Входные данные центрируют только текст по горизонтали, он все еще прилипает к верхней части карты, и я не знаю почему. Я подготовил документацию по интерфейсу материалов, и все должно работать.

Код

<Card className={classes.root}>
  <CardContent className={classes.bigCard}>
    <Grid 
      align="center"
      container
      direction="column"
      justify="center"
      spacing={0}
      style={{ backgroundColor: 'teal' }}
    >
      <Grid item style={{ backgroundColor: 'yellow' }}>
        <h1>hey</h1>
      </Grid>
    </Grid>
  </CardContent>
</Card>

Answer 1

Попробуйте это на вашем первом внешнем компоненте Grid:

<Grid 
  direction="column"
  justify="center"
  alignItems="center"
  spacing={0}
  style={{ backgroundColor: 'teal' }}
 />

Я не уверен, почему у вас есть Grid в Grid, но я полагаю, что компоненты Grid реализовали модель Flexible CSS внизу. Это означает, что они используют flexbox для своих свойств. Лучший способ центрировать что-либо с помощью flexbox:

<ContainerDiv 
  styles={{
     display: 'flex', 
     alignItems: 'center', 
     justifyContent:'center'
}}>
  <Content> This will be centered </Content> 
</ContainerDiv>

Это отличное прочтение: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Пользовательский интерфейс материала основан на нем.

Надеюсь, это поможет вам сосредоточиться. :)