CODE EXAMPLE FOR JAVASCRIPT

MUI Custom styling

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