通過 hover 關於文本字段如何去除黑色邊框

Question

當我們想在文本字段上顯示 hover 時，文本字段中出現一些黑色邊框，如何解決該問題

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',
    },