小编Fel*_* B.的帖子

如何使用 Material-UI 在 React 中垂直和水平居中?

我想将按钮置于屏幕中央的卡片内。到目前为止我还没能做到。

这是我到目前为止所拥有的:

import React from 'react'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
import { Card } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)',
    minWidth: '100%',
    minHeight: '100vh',
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  },
  card: {
    maxWidth: '40%',
    minHeight: '20vh',
  },
})

export default function LoginPage () {
  const classes = useStyles()

  return (
    <Grid className={classes.root} spacing={0} align="center" justify="center">
      <Card className={classes.card} align="center" justify="center">
        <Button variant="contained" …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui

6
推荐指数
2
解决办法
2万
查看次数

标签 统计

material-ui ×1

reactjs ×1