如何在 Material-UI for React 的 TextField 组件的 variant="outlined" 模式下将 helperText 左对齐？

Question

默认情况下，帮助文本“Some important text”未对齐到最左边。如何才能实现对齐？

- innoxius

Answer 1

你可以使用makeStyles对你的css进行处理，然后将生成的样式应用到TextField的FormHelperTextProps属性中的className参数上。

import React from "react";
import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  helperText: {
    marginLeft: 0
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        FormHelperTextProps={{
          className: classes.helperText
        }}
        label="Test"
        helperText="Helper text..."
        variant="outlined"
      />
    </div>
  );
}

现场演示:

- yun_jay

Answer 2

只是一个小更新，我在MUI5中遇到了这个问题，并希望在ThemeProvider中应用它，这样所有的文本字段都能摆脱那个边距。对我来说，这样做起作用：

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        FormHelperTextProps: {
          style: {
            marginLeft: '0',
          },
        },
    },
  },

- Tigran Petrosyan