0
458
VistasHow to remove border-bottom from TextField when hover/mouseOver?
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.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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;
}
·
Juan Pablo Isaza
Denunciar
0
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" />
·
Juan Pablo Isaza
Denunciar
Responde la pregunta