如何在Material-UI React.js中居中GridItem及表单输入字段？

嘿，我来帮你搞定这两个Material-UI里的对齐问题！

这里有几种实用的实现方式，你可以根据场景选择：

• 借助Grid容器的全局对齐：如果你的GridItem是放在Grid container里面的，直接给容器设置justify="center"和alignItems="center"，就能让内部所有GridItem在容器内居中：

<Grid container justify="center" alignItems="center">
  <GridItem xs={6}>
    {/* 你的内容模块 */}
  </GridItem>
</Grid>

• 给单个GridItem添加局部样式：如果只需要某一个GridItem自身内容居中，可以用makeStyles自定义样式类，或者直接用内联样式：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  centeredGridItem: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%'
  },
}));

// 在组件内使用
const classes = useStyles();
<GridItem xs={2} className={classes.centeredGridItem}>
  {/* 你的内容 */}
</GridItem>

• 用Box组件快速实现：Material-UI的Box组件可以快速添加布局样式，直接包裹GridItem内部的内容即可：

<GridItem xs={2}>
  <Box display="flex" justifyContent="center" alignItems="center" width="100%">
    {/* 要居中的内容 */}
  </Box>
</GridItem>

针对你给出的CustomInput代码，这里有两种直接的修改方案：

方案一：给GridItem添加居中样式 #

让GridItem内部的所有内容（包括label和输入框）都居中对齐：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  centeredGrid: {
    display: 'flex',
    justifyContent: 'center',
    width: '100%'
  },
}));

// 组件内使用
const classes = useStyles();

<GridItem xs={2} className={classes.centeredGrid}>
  <CustomInput 
    labelText="Children Count" 
    formControlProps={{ fullWidth: true }}
    inputProps={{ 
      type: 'text', 
      ...formik.getFieldProps('family.relationCountsConfig.childrenCount'),
      error: get(touched, 'family.relationCountsConfig.childrenCount', '') && get(errors, 'family.relationCountsConfig.childrenCount', '')
    }} 
  />
</GridItem>

方案二：单独给表单控件添加文本居中 #

如果只希望label和输入框的文本居中，而保持布局宽度不变，可以给formControlProps添加样式类：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  centeredForm: {
    textAlign: 'center'
  },
}));

// 组件内使用
const classes = useStyles();

<GridItem xs={2}>
  <CustomInput 
    labelText="Children Count" 
    formControlProps={{ 
      fullWidth: true,
      className: classes.centeredForm
    }}
    inputProps={{ 
      type: 'text', 
      ...formik.getFieldProps('family.relationCountsConfig.childrenCount'),
      error: get(touched, 'family.relationCountsConfig.childrenCount', '') && get(errors, 'family.relationCountsConfig.childrenCount', '')
    }} 
  />
</GridItem>

内容的提问来源于stack exchange，提问作者SKM