material-ui - 如何将 helperText 对齐到 Material-UI for React 中 TextField 变体 ="outlined"的最左侧？

Question

默认情况下，helperText“Some important text”没有对齐到最左边。怎么做到的？

Answer 1

您可以为您的 css 使用 makeStyles，然后将您生成的样式应用到 FormHelperTextProps prop 中的 className prop from 文本字段。

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>
  );
}

现场演示: