How to customize MUI V5 TextField

Question

I am trying to customise my theme for material v5 and I would like to know how I can disable the black border that appears when I hover over the textfield component. This is what I have so far under my custom theme

 MuiTextField: {
      styleOverrides: {
        root: {},
      },
      defaultProps: {
        inputProps: {
          style: {
            fontSize: '11.8px',
            // height: '.85rem',
          },
        },
      },
    },

Answer 1

Checkout the documentation at: https://mui.com/material-ui/react-text-field/#customization

import * as React from 'react';
import { alpha, styled } from '@mui/material/styles';

import TextField from '@mui/material/TextField';

const CssTextField = styled(TextField)({
  '& label.Mui-focused': {
    color: 'green',
  },
  '& .MuiInput-underline:after': {
    borderBottomColor: 'green',
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: 'red',
    },
    '&:hover fieldset': {
      borderColor: 'yellow',
    },
    '&.Mui-focused fieldset': {
      borderColor: 'green',
    },
  },
});

export default function CustomizedInputs() {
  return (
      <CssTextField label="Custom CSS" id="custom-css-outlined-input" />
  );
}