¿Cómo puedo eliminar el subrayado de TextField de Material-UI?

Esta reseña fue probado por expertos así garantizamos la exactitud de nuestro post.

Solución:

También puede utilizar el InputProps prop en el componente TextField para lograr esto configurando el disableUnderline propiedad a true.

Aunque esta es actualmente la respuesta aceptada, consulte la otra respuesta en su lugar (usando el disableUnderline apuntalar). 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 utiliza para el estilo predeterminado y flotante y :after se usa para el estilo enfocado, por lo que el borde debe eliminarse para ambos casos.

Los símbolos de unión múltiples (p. ej. "&&&:before") aumentar 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 ;

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Respuesta relacionada: ¿Cómo puedo personalizar el estilo del subrayado de Material-UI sin usar el tema?

Tienes la opción de avalar nuestra función fijando un comentario y dejando una valoración te damos las gracias.

---

---

Utiliza Nuestro Buscador