How to change the styles of MUI TextField In React

How to change the styles of MUI TextField In React

MUI library is a great library that offers a comprehensive suite of UI tools that helps ship new features faster.

Sometimes we would like to customize the default look and feel of MUI components, which might be a bit not straightforward, This article will demonstrate how to change the styles of the MUI text field component.


Let’s get started!

There are a few options we can use in order to customize the styles of MUI components in React, some of them are:

In this article, we will cover one aspect of the styleOverrides options, which is to override the styles using the sx prop.

First, we need to create a new component for the text field, then we will pass the customized styles as props to this component so that we can re-use it for different use cases, let’s create CustomTextField.jsx file, and inside it, we will have the following implementation:

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function CustomTextField({ label = "default label" }) {
  return (
    <TextField
      label={label}
    />
  );
}
How to change the styles of MUI TextField In React
How to change the styles of MUI TextField In React

As shown above, we’ve created the CustomTextField which wraps the MUI TextField component.


How to change the root styles of MUI TextField

To override the root styles of the TextField which has the class name MuiTextField-root, we need to define our custom styles through the sx prop on the root level, as shown below:

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function InputField({ label = 'default label' }) {
  return (
    <TextField
      label={label}
      sx={{
        backgroundColor: '#ffd60a',
        border: '3px solid #001d3d',
      }}
    />
  );
}
How to change the root styles of MUI TextField
How to change the root styles of MUI TextField

That looks awesome! Let’s continue…


How to change the root styles of the MUI TextField label

We need to pass our custom styles using the sx prop through the prop InputLabelProps as the following:

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function InputField({ label = 'default label' }) {
  return (
    <TextField
      label={label}
      sx={{
        backgroundColor: '#ffd60a',
        border: '3px solid #001d3d',
      }}
      InputLabelProps={{
        sx: {
          color: '#003566',
          textTransform: 'capitalize',
        },
      }}
    />
  );
}
How to change the root styles of the MUI TextField label
How to change the root styles of the MUI TextField label

Looks good! We have the label color changed, and the text transformed to the Capitalize form.


How to change the styles of the MUI TextField input

The same applied here, to change the styles of the MUI TextField input, we need to pass the custom styles using the sx prop through the inputProps prop, as the following:

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function InputField({ label = 'default label' }) {
  return (
    <TextField
      label={label}
      sx={{
        backgroundColor: '#ffd60a',
        border: '3px solid #001d3d',
      }}
      InputLabelProps={{
        sx: {
          color: '#003566',
          textTransform: 'capitalize',
        },
      }}
      inputProps={{
        sx: {
          color: 'red',
          paddingLeft: '15px',
          fontSize: '20px',
        },
      }}
    />
  );
}

The above changes will result in the following UI:

How to change the styles of the MUI TextField input
How to change the styles of the MUI TextField input

How to change the styles of the MUI TextField Helper Text

MUI TextField helper text is usually used in case of communicating back to the user, such as reporting some input validations or errors.

We can use the property helperText to pass the message to the TextField, and by using the FormHelperTextProps we can pass our customized styles, as the following:

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function InputField({ label = 'default label' }) {
  return (
    <TextField
      label={label}
      sx={{
        backgroundColor: '#ffd60a',
        border: '3px solid #001d3d',
      }}
      InputLabelProps={{
        sx: {
          color: '#003566',
          textTransform: 'capitalize',
        },
      }}
      inputProps={{
        sx: {
          color: 'red',
          paddingLeft: '15px',
          fontSize: '20px',
        },
      }}
      helperText="Please enter a valid input"
      FormHelperTextProps={{
        sx: {
          color: 'red',
        },
      }}
    />
  );
}
How to change the styles of the MUI TextField Helper Text
How to change the styles of the MUI TextField Helper Text

Now, let’s see how we can customize the styles on certain behaviors like hover, and focus.


How to change the border of the MUI TextField On Hover/On Focus

Between the input Default Label and the HelperText message, we have a border as shown below, and this border gets darker on hovering over it.

How to change the border of the MUI TextField On Hover/On Focus
How to change the border of the MUI TextField On Hover/On Focus

To customize the styles of this border onHover or onFocus we can do it by targeting the fieldset element from the InputProps prop (Note the difference between InputProps and inputProps), as the following:

  InputProps={{
    sx: {
      '&:hover fieldset': {
        border: '2px solid blue!important',
        borderRadius: 0,
      },
      '&:focus-within fieldset, &:focus-visible fieldset': {
        border: '4px solid red!important',
      },
    },
  }}
import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function InputField({ label = 'default label' }) {
  return (
    <TextField
      label={label}
      sx={{
        backgroundColor: '#ffd60a',
        border: '3px solid #001d3d',
      }}
      InputLabelProps={{
        sx: {
          color: '#003566',
          textTransform: 'capitalize',
        },
      }}
      InputProps={{
        sx: {
          '&:hover fieldset': {
            border: '2px solid blue!important',
            borderRadius: 0,
          },
          '&:focus-within fieldset, &:focus-visible fieldset': {
            border: '4px solid red!important',
          },
        },
      }}
      inputProps={{
        sx: {
          color: 'red',
          paddingLeft: '15px',
          fontSize: '20px',
        },
      }}
      helperText="Please enter a valid input"
      FormHelperTextProps={{
        sx: {
          color: 'red',
        },
      }}
    />
  );
}

Now once the user moves the mouse cursor over the input field, we can see the following styles applied:

How to change the border of the MUI TextField On Hover
How to change the border of the MUI TextField On Hover

And once the input is focused:

How to change the border of the MUI TextField On Focus
How to change the border of the MUI TextField On Focus

That’s It! If you want to customize more, you can target more elements in the same way we did in this article (like the input disabled state).


How to make MUI TextField re-usable

In order to achieve the re-usability, we can extract the styles into their variables and pass them as the default props to the TextField, and we can allow the users of the CustomTextField to pass their own styles, as the following:

import * as React from 'react';
import TextField from '@mui/material/TextField';

// 1- Default styles
const rootStyles = {
  backgroundColor: '#ffd60a',
  border: '3px solid #001d3d',
};

const inputLabelStyles = {
  color: '#003566',
  textTransform: 'capitalize',
};

const rootInputStyles = {
  '&:hover fieldset': {
    border: '2px solid blue!important',
    borderRadius: 0,
  },
  '&:focus-within fieldset, &:focus-visible fieldset': {
    border: '4px solid red!important',
  },
};

const inputStyles = {
  color: 'red',
  paddingLeft: '15px',
  fontSize: '20px',
};

const helperTextStyles = {
  color: 'red',
};

export default function InputField({
  label = 'default label',
  // 2- User custom styles
  customRootStyles,
  customInputLabelStyles,
  customRootInputStyles,
  customInputStyles,
  customHelperTextStyles,
}) {
  return (
    <TextField
      label={label}
      helperText="Please enter a valid input"
      sx={{ ...rootStyles, ...customRootStyles }}
      InputLabelProps={{
        sx: {
          ...inputLabelStyles,
          ...customInputLabelStyles,
        },
      }}
      InputProps={{
        sx: {
          ...rootInputStyles,
          ...customRootInputStyles,
        },
      }}
      inputProps={{
        sx: {
          ...inputStyles,
          ...customInputStyles,
        },
      }}
      FormHelperTextProps={{
        sx: {
          ...helperTextStyles,
          ...customHelperTextStyles,
        },
      }}
    />
  );
}

Resources:

That’s It! Hope this article helps you in achieving your custom styles in MUI.

Photo from Unsplash.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: