Как центрировать текст в InputBase из material-ui - PullRequest
Новая
       11

Как центрировать текст в InputBase из material-ui

0 голосов
/ 07 октября 2019

Я пытаюсь центрировать текстовую область элемента InputBase из material-ui. В настоящее время я не уверен, если это ошибка или нет. Пример того, как я пытался центрировать текстовую область, можно найти здесь .

Мой код выглядит так: 

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"

Есть идеи, если я что-то не так делаю или это действительно ошибка?

1 Ответ

0 голосов
/ 07 октября 2019

Может быть, вам нужно включить вложенные стили и определить 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"
      }
    }
  }));
...