0
457
Views¿Cómo eliminar la parte inferior del borde de TextField cuando se pasa el mouse por encima?
Soy principiante en ReactJS y estoy usando materia-ui para crear una página.
Necesito hacer una costumbre en un TextField . Cuando paso el mouse sobre el campo de entrada, no quiero que cambie el borde inferior. Sin embargo, por una configuración predeterminada de material-ui, cuando paso el mouse sobre el elemento, se cambia el borde inferior. Es más fácil de explicar con esta imagen de abajo. No quiero que el borde se vuelva más grueso cuando me desplace. ¿Me podrías decir cómo puedo eliminar esto?
Aquí está mi código que puse encodesandbox
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; } } `;Muchas gracias por cualquier ayuda.
2 answers
Answer question0
Puede anular el css predeterminado de esta manera (Aquí está sandbox ):
.MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before { border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important; }Idealmente, debe crear una clase personalizada para este estilo y aplicarla donde sea necesario; de lo contrario, estos cambios serán globales. p.ej:
.[your-custom-class-name].MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before { border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important; }0
Si desea utilizar componentes con estilo, puede hacerlo como el código a continuación.
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" />