将鼠标悬停在文本字段上如何删除黑色边框

Question

当我们想将鼠标悬停在文本字段上时，文本字段中出现一些黑色边框，如何解决这个问题

import React, { useState } from "react";
import TextField from '@mui/material/TextField';
import { styled } from '@mui/material/styles';
const styles = styled(TextField)({
  '*.Mui-focused': {
    borderColor: 'transparent',
    outline:'none',
  }})
export default function Demo() {
  return (
    <>
      <TextField id="standard-basic" label="Standard" variant="standard"  />
    </>
  );
}

Answer 1

您可以添加此样式以在悬停时设置新颜色

'&:hover fieldset': {
      borderColor: 'grey',
    },

Answer 2

这对我有用

 '& .MuiInput-underline:hover:before':
{
    border: 'none !important'
},

Answer 3

如果有人仍在尝试寻找解决方案，并且上述解决方案无法解决，请查看此解决方案。这对我有用。

导出 const CustomTextField = styled(TextField)(() => ({

'& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
    borderColor:'white'
},

}））