How to align the helperText to the far left in the TextField variant="outlined" in Material-UI for React?

Question

By default the helperText "Some important text" is not aligned to the far left. How can it be done?

Answer 1

You can use makeStyles for your css and then apply your generated styles to the className prop inside of the FormHelperTextProps prop from TextField.

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

Live demo: