0
922
Views¿Cómo puedo eliminar el subrayado de TextField de Material-UI?
Quiero que TextField esté desnudo (sin subrayar) cuando use material-ui TextField. Sé que usar InputBase de material-ui puede lograr esto, pero necesito usar TextField API para lograrlo, pero no encontré la manera de hacerlo en la guía de API.
2 answers
Answer question0
Aunque esta es actualmente la respuesta aceptada, consulte la otra respuesta en su lugar (usando el accesorio disableUnderline ). Escribí esta respuesta después de haber escrito recientemente una respuesta sobre cómo personalizar el subrayado (que usa enfoques similares a esta respuesta) y me perdí de que había una propiedad específica para eliminar el subrayado.
A continuación se muestra un ejemplo de cómo eliminar el subrayado. :before se usa para el estilo predeterminado y flotante y :after se usa para el estilo enfocado, por lo que el borde debe eliminarse en ambos casos.
Los múltiples símbolos de unión (p. ej "&&&:before" ) aumentan la especificidad CSS de la regla para que prevalezca sobre el estilo predeterminado (p. ej &:hover:not($disabled):before ).
import React from "react"; import ReactDOM from "react-dom"; import TextField from "@material-ui/core/TextField"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles({ underline: { "&&&:before": { borderBottom: "none" }, "&&:after": { borderBottom: "none" } } }); function App() { const classes = useStyles(); return <TextField defaultValue="default text" InputProps={{ classes }} />; } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 
Respuesta relacionada: ¿Cómo puedo personalizar el estilo del subrayado de Material-UI sin usar el tema?
0
También puede usar la propiedad InputProps en el componente TextField para lograr esto configurando la propiedad disableUnderline en true .
<TextField fullWidth placeholder="Search..." InputProps={{ disableUnderline: true }} />