如何在 Material-ui 中将 InputBase 中的文本居中答案

【问题标题】：How to center text in InputBase from material-ui如何在 Material-ui 中将 InputBase 中的文本居中
【发布时间】：2020-02-04 21:53:45
【问题描述】：

我正在尝试将 Material-ui 中的 InputBase 元素的文本区域居中。目前我不确定这是否是一个错误。我如何尝试使文本区域居中的示例可以在 here 找到。

我的代码如下所示：

import {
  InputBase,
  makeStyles
} from "@material-ui/core";

export default function EditTitle() {
  const useStyles = makeStyles(theme => ({
    input: {
      height: theme.typography.h1.fontSize,
      fontSize: theme.typography.h1.fontSize,
      fontWeight: theme.typography.h1.fontWeight,
      textAlign: "center",
      align: "center"
    }
  }));

  const classes = useStyles();

  return (
    <InputBase
      inputProps={{ "aria-label": "naked" }}
      className={classes.input}
      defaultValue="Title"
      fullWidth={true}
      textAlign="center"
      align="center"
    ></InputBase>
  );
}

但是在编译的网站上没有设置text-align: center。当前依赖列表：

"@material-ui/core": "^4.4.3",
"@material-ui/icons": "^4.4.3",
"next": "^9.0.6",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"typeface-roboto": "0.0.75"

知道我做错了什么还是这确实是一个错误？

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

你可以使用align、textAlign来居中输入，这里是组件

import React from 'react'
import PropTypes from 'prop-types'
import { TextField } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  inputStyle: {
    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: '0',
    },
    align: 'center',
    textAlign: 'center',
    '& input': {
      textAlign: 'center',
    },
    width: '60px',
  },
}))

const CustomTextFieldNumber = ({ number }) => {
  const classes = useStyles()

  return (
    <TextField
      InputProps={{
        disableUnderline: true,
        classes: { input: classes.inputStyle },
      }}
      size="small"
      type="number"
      value={number}
    />
  )
}

或者你也可以使用 inputProps={{ style: {textAlign: 'center'} }} 例如：

<TextField
          InputProps={{
            disableUnderline: true,
            classes: { input: classes.inputStyle },
          }}
          inputProps={{ style: {textAlign: 'center'} }}
          size="small"
          type="number"
          value={number}
        />

【讨论】：

【解决方案2】：

也许您需要启用嵌套样式并定义 useStyle 如下。

  const useStyles = makeStyles(theme => ({
    input: {
      height: theme.typography.h1.fontSize,
      fontSize: theme.typography.h1.fontSize,
      fontWeight: theme.typography.h1.fontWeight,
      textAlign: "center",
      align: "center",
      '& input': {
        textAlign: "center"
      }
    }
  }));

【讨论】：

【解决方案3】：

这将解决您的问题

const theme = createTheme({
  ...
  overrides: {
    MuiInputBase: {
      input: {
        textAlign: 'center'
      }
    }
  }
})

【讨论】：