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