如何自定义 MUI V5 TextField

Question

我正在尝试自定义 Material v5 的主题，我想知道如何禁用当我将鼠标悬停在文本字段组件上时出现的黑色边框。这是我迄今为止在自定义主题下所拥有的

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

Answer 1

查看文档： 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" />
  );
}