How to remove border-bottom from TextField when hover/mouseOver?

Question

I'm beginner in ReactJS and I'm using materia-ui to create a page.

I need to do a custom on a TextField. When I hover over the Input field I don't want the border-bottom to change. However, by a default material-ui setting, when I hover over the element, the border-bottom is changed. It's easier to explain with this image below. I don't want the border to get thicker when I hover. Could you tell me how can I remove this?

Here's my code I put into codesandbox

import React from "react";
import * as S from "./styles";

export default function App() {
  return (
    <div className="App">
      <S.Input label="Name" variant="standard" />
    </div>
  );
}

import styled from "styled-components";

import { TextField } from "@mui/material";

export const Input = styled(TextField)`
  && {
    :hover {
      border-bottom: none;
    }
  }
`;

Thanks a lot for any help.

Answer 1

You can override the default css like this (Here is sandbox):

.MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before {

  border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;

}

Ideally, you should create a custom class for this style and apply it where necessary, otherwise these changes will be global. e.g:

.[your-custom-class-name].MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before {

  border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;

}

Answer 2

If you want to use styled-components you can do it like the code below.

import styled from "styled-components";    
import { TextField } from "@mui/material";

export const InputStyled = styled(TextField)`
  & .MuiInputBase-root {
    :hover {
      :before {
        border-bottom: 1px solid rgba(0, 0, 0, 0.42);
      }
    }
  }
`;

<InputStyled label="Name" variant="standard" />