How to override the width of a TextField component with React Material UI?

Sometimes, we want to override the width of a TextField component with React Material UI.

In this article, we’ll look at how to override the width of a TextField component with React Material UI.

How to override the width of a TextField component with React Material UI?

To override the width of a TextField component with React Material UI, we can add the fullWidth prop to it.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <TextField
        label="Label"
        placeholder="Placeholder"
        helperText="Full width!"
        margin="normal"
        fullWidth
      />
    </div>
  );
}

We set the fullWidth prop to true to make the TextField fill the parent container.

Conclusion

To override the width of a TextField component with React Material UI, we can add the fullWidth prop to it.