¿Qué es MUI y cómo puede usarlo en sus proyectos ReactJS?

En septiembre de 2021, la compañía anteriormente conocida como Material-UI cambió su nombre a MUI. Este cambio se produjo principalmente porque muchas personas no podían distinguir Material-UI de Material Design (un sistema de diseño).

MUI comenzó como una implementación de Material Design diseñada para aplicaciones React. Hoy la marca se está expandiendo y busca crear un nuevo sistema de diseño, que será una alternativa al Material Design.

El acrónimo MUI significa Material para crear interfaces de usuario y, en este artículo, aprenderá exactamente cómo usar MUI para crear interfaces de usuario de React.

¿Cómo acceder a MUI en React?

MUI está disponible como paquete npm. Por lo tanto, todo lo que necesita hacer para acceder es ejecutar la siguiente línea de código dentro de su proyecto React:

npm install @ mui / material @ emotion / react @ emotion / styled

Asumiendo que ya has instalado React en su dispositivo, tiene acceso completo a la biblioteca MUI y todos sus componentes. MUI tiene más de cien componentes diferentes que se clasifican en una de las siguientes categorías:

• Entradas
• Visualización de datos
• Realimentación
• Superficies
• Navegación
• Diseño
• Utils
• Cuadrícula de datos
• Fecha y hora

Después de instalar MUI como un paquete npm, usar la biblioteca dentro de su proyecto es tan simple como importar el componente requerido en el archivo apropiado e insertando sus preferencias de estilo en ubicaciones específicas a lo largo la interfaz de usuario.

Si desea crear una página de inicio de sesión para su aplicación React, hay varios componentes MUI que puede usar que le ahorrarán tiempo y lo ayudarán a crear un diseño limpio.

Creación del componente React Sign-in

Para crear un nuevo componente en React, simplemente navegue a la carpeta src de React y cree una nueva carpeta de componentes. La carpeta de componentes puede ser el hogar de todos sus componentes, comenzando con el componente de inicio de sesión.

Relacionado: ¿Qué es ReactJS y para qué se puede utilizar?

El archivo Signin.js

importar Reaccionar desde 'reaccionar';
function Signin () {
regreso (

);
}
exportar inicio de sesión predeterminado;

Después de crear su componente de inicio de sesión, es hora de vincularlo a su aplicación React importándolo al componente de su aplicación (ubicado dentro de la carpeta src).

El archivo App.js actualizado

importar Reaccionar desde 'reaccionar';
importar Signin desde './components/Signin';
función App () {
regreso (






);
}
exportar la aplicación predeterminada;

Ahora puede comenzar a explorar los componentes MUI que desea utilizar en su página de inicio de sesión.

¿Qué es el componente de tipografía?

El componente de tipografía pertenece a la categoría de visualización de datos de MUI y tiene trece variantes predeterminadas. Éstos incluyen:

• h1
• h2
• h3
• h4
• h5
• h6
• subtítulo1
• subtítulo2
• cuerpo1
• cuerpo2
• botón
• subtítulo
• overline

La variante que seleccione dependerá del texto que desee mostrar. Por ejemplo, si desea mostrar un encabezado, puede usar cualquiera de las seis variantes de encabezado en su interfaz de usuario. Simplemente inserte la propuesta variante y el valor seleccionado en el componente de tipografía.

Uso del ejemplo de componente de tipografía

importar Reaccionar desde 'reaccionar';
importar tipografía desde '@ mui / material / Typography';
function Signin () {
regreso (


 Iniciar sesión 



);
}
exportar inicio de sesión predeterminado;

Una conclusión importante del código anterior es que cada vez que inserta un nuevo componente en su interfaz de usuario, también deberá importarlo en la parte superior de su archivo de componente React. La actualización de su componente de inicio de sesión con el componente de tipografía (como se ve en el código anterior) producirá el siguiente resultado en su navegador:

¿Qué es el componente de campo de texto?

El componente de campo de texto pertenece a la categoría de entrada. Este componente tiene dos funciones simples; permite a los usuarios ingresar o editar el texto en una interfaz de usuario. El componente de campo de texto utiliza tres variantes, a saber, delineado, relleno y estándar, siendo la variante delineada la predeterminada. Por lo tanto, si desea utilizar el componente de campo de texto predeterminado, no es necesario que incluya la propuesta de variante. El componente de campo de texto también usa varios otros accesorios, incluyendo etiqueta, requerido, tipo, identificación, deshabilitado, etc.

Uso del ejemplo del componente de campo de texto

importar Reaccionar desde 'reaccionar';
importar TextField desde '@ mui / material / TextField';
importar tipografía desde '@ mui / material / Typography';
function Signin () {
regreso (


 Iniciar sesión 
label = "Dirección de correo electrónico"
requerido
id = "correo electrónico"
nombre = "correo electrónico"
/>
label = "Contraseña"
requerido
id = "contraseña"
nombre = "contraseña"
type = "contraseña"
/>



);
}
exportar inicio de sesión predeterminado;

El código anterior producirá el siguiente resultado en su navegador:

Como sugiere el nombre, el componente de enlace funciona de la misma forma que un enlace CSS simple. Entra en la categoría de navegación y tiene los tradicionales href y los accesorios de destino. Además, tiene un color, una variante y un apoyo subrayado.

Relacionado: Cómo usar accesorios en ReactJS

Sin embargo, no es necesario utilizar accesorios adicionales a menos que desee que su enlace se vea único. Por ejemplo, el valor predeterminado del elemento subrayado es "siempre" y los otros dos valores que puede asignar al elemento son "ninguno" y "desplazarse".

Por lo tanto, solo necesita incluir el apoyo de subrayado en su componente cuando no desee subrayado o cuando desee que tenga un estado de desplazamiento.

¿contraseña olvidada?

Insertar el código anterior en su componente de inicio de sesión existente producirá el siguiente resultado en su navegador:

¿Qué es el componente de botón?

El componente de botón también pertenece a la categoría de entrada y se adhiere a la funcionalidad de botón general; comunica las acciones de un usuario a su aplicación. Este componente utiliza una de tres variantes (texto, contenido y esquema), y cada variante puede aparecer en uno de tres estados: principal, inhabilitado y vinculado.

Una variante predeterminada del componente de botón es el texto. Por lo tanto, si desea un botón contenido o delineado, deberá usar el accesorio de variante para indicarlo. Además del accesorio variante, el componente de botón también tiene un controlador onclick y un accesorio de color, entre otros.

Uso del ejemplo de componente de botón

 Iniciar sesión

Si inserta el código anterior en su componente de inicio de sesión, se actualizará su interfaz de usuario para que se vea así:

Ahora tiene un botón interactivo que se desplaza cuando el mouse pasa sobre él. Pero todos los componentes son horizontales y no se ve muy bien.

¿Qué es el componente de caja?

Theboxcomponent es exactamente lo que necesita para organizar los componentes de la utilidad (como el componente del botón) en su aplicación React. El componente de caja usa ansx prop, que tiene acceso a todas las propiedades del sistema (como altura y ancho) que necesita para organizar los componentes en su interfaz de usuario.

Uso del ejemplo de componente de caja

importar Reaccionar desde 'reaccionar';
importar Enlace desde '@ mui / material / Link';
importar TextField desde '@ mui / material / TextField';
importar tipografía desde '@ mui / material / Typography';
importar {Botón, Cuadro} de '@ mui / material';
function Signin () {
regreso (


sx = {{
mi: 8,
pantalla: 'flex',
flexDirection: 'columna',
alignItems: 'centro',
}}>
 Iniciar sesión 
label = "Dirección de correo electrónico"
requerido
id = "correo electrónico"
nombre = "correo electrónico"
margin = "normal"
/>
label = "Contraseña"
requerido
id = "contraseña"
nombre = "contraseña"
type = "contraseña"
margin = "normal"
/>
href = "#"
sx = {{señor: 12, mb: 2}}
>
¿contraseña olvidada?

variante = "contenido"
sx = {{mt: 2}}
>
Iniciar sesión





);
}
exportar inicio de sesión predeterminado;

Al envolver el componente de caja alrededor de los componentes de la utilidad (y usar el accesorio sx) en el código anterior, creará efectivamente una estructura de columna flexible. El código anterior producirá la siguiente página de inicio de sesión de React en su navegador:

¿Qué es el componente de cuadrícula MUI?

El componente de cuadrícula es otro componente MUI útil para aprender. Se incluye en la categoría de diseño de MUI y facilita la capacidad de respuesta. Permite a un desarrollador lograr un diseño receptivo debido a su sistema de diseño de 12 columnas. Este sistema de diseño utiliza los cinco puntos de interrupción predeterminados de MUI para crear aplicaciones que se adaptan a cualquier tamaño de pantalla. Estos puntos de interrupción incluyen:

• xs (extra pequeño y comienza en 0px)
• sm (pequeño y comienza en 600px)
• Maryland (medio y comienza en 900 px)
• lg (grande y comienza en 1200px)
• SG (extra grande y comienza en 1536 px)

El componente MUIgrid funciona de la misma manera que la propiedad CSS flexbox en que tiene un sistema padre-hijo unidireccional basado en dos tipos de diseños: contenedor (padre) y elementos (hijo). Sin embargo, el componente de cuadrícula MUI facilita una cuadrícula anidada, donde un elemento también puede ser un contenedor.

Explore otras opciones de estilo para aplicaciones ReactJS

Este artículo le enseña cómo instalar y usar la biblioteca MUI en sus aplicaciones React. Aprenderá a utilizar algunos componentes básicos (como la tipografía) y algunos de los componentes estructurales más avanzados (como el componente de caja).

La biblioteca MUI es fácil de usar, efectiva y funciona muy bien con las aplicaciones React. Pero eso no significa que sea la única opción de estilo disponible para los desarrolladores de React. Si está creando una aplicación React, puede usar la biblioteca MUI o cualquier marco CSS para diseñar su aplicación.

Kadeisha Kean (33 Artículos publicados)

Kadeisha Kean es desarrolladora de software Full-Stack y redactora técnica / tecnológica. Tiene la habilidad distintiva de simplificar algunos de los conceptos tecnológicos más complejos; produciendo material que puede ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).

Más de Kadeisha Kean