Question

我正在尝试从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"

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

Answer 1

也许您需要启用嵌套样式并按如下所示定义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"
      }
    }
  }));

Answer 2

可以使用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}
        />

如何从Material-UI将文本在InputBase中居中

2 个答案: