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 intocodesandbox

 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. eg:

.[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" />