Mejores prácticas de MUI

Este artículo asume que estás siguiendo nuestra práctica recomendada al utilizar nuestro tema de Material UI. Seguir los pasos a continuación maximiza la compatibilidad con Docker Desktop y minimiza el trabajo que debes realizar como autor de la extensión. Estos deben considerarse complementarios a las pautas no específicas de MUI que se encuentran en la Descripción general del estilo de la UI.

Asume que el tema puede cambiar en cualquier momento

Resiste la tentación de ajustar detalladamente tu UI con colores, desplazamientos y tamaños de fuente precisos para que se vea lo más atractiva posible. Cualquier especialización que hagas hoy será relativa al tema actual de MUI, y podría verse peor cuando el tema cambie. Cualquier parte del tema puede cambiar sin previo aviso, incluyendo (entre otras cosas):

• La fuente o los tamaños de fuente.
• Los grosores o estilos de los bordes.
• Colores:
  • Los miembros de nuestra paleta (por ejemplo, red-100) podrían cambiar sus valores RGB.
  • Los colores semánticos (por ejemplo, error, primary, textPrimary, etc.) podrían cambiarse para usar un miembro diferente de nuestra paleta.
  • Los colores de fondo (por ejemplo, los de la página o los de los diálogos) podrían cambiar.
• Espaciados:
  • El tamaño de la unidad básica de espaciado (expuesta a través de theme.spacing). Por ejemplo, podríamos permitir a los usuarios personalizar la densidad de la UI.
  • El espaciado predeterminado entre párrafos o elementos de la cuadrícula (grid).

La mejor manera de construir tu UI, de modo que sea robusta frente a futuros cambios de tema, es:

• Sobrescribir el estilo predeterminado lo menos posible.
• Usar tipografía semántica. Por ejemplo, utiliza componentes Typography o Link con las variantes (variant) adecuadas en lugar de usar elementos HTML tipográficos (<a>, <p>, <h1>, etc.) directamente.
• Usar tamaños predefinidos. Por ejemplo, utiliza size="small" en los botones o fontSize="small" en los iconos, en lugar de especificar tamaños en píxeles.
• Preferir colores semánticos. Por ejemplo, utiliza error o primary en lugar de códigos de color explícitos.
• Escribir la menor cantidad de CSS posible. En su lugar, escribe marcado semántico. Por ejemplo, si deseas espaciar los párrafos de texto, utiliza la propiedad paragraph en tus instancias de Typography. Si deseas espaciar otra cosa, utiliza un componente Stack o Grid con el espaciado predeterminado.
• Utilizar los modismos visuales que hayas visto en la UI de Docker Desktop, ya que estos son los principales con los que probaremos cualquier cambio de tema.

Cuando crees algo personalizado, centralízalo

A veces necesitarás un elemento de la UI que no existe en nuestro sistema de diseño. Si es así, te recomendamos que primero te pongas en contacto con nosotros. Es posible que ya tengamos algo en nuestro sistema de diseño interno, o que podamos expandir nuestro sistema de diseño para adaptarlo a tu caso de uso.

Si aun así decides construirlo tú mismo después de contactarnos, intenta definir la nueva UI de manera reutilizable. Si defines tu UI personalizada en un solo lugar, será más fácil cambiarla en el futuro si nuestro tema principal cambia. Podrías usar:

• Una nueva variante (variant) de un componente existente; consulta la documentación de MUI.
• Un mixin de MUI (un conjunto libre de reglas de estilo reutilizables definidas dentro de un tema).
• Un nuevo componente reutilizable.

Algunas de las opciones anteriores requieren que extiendas nuestro tema MUI. Consulta la documentación de MUI sobre la composición de temas (theme composition).

¿Qué sigue?

• Echa un vistazo a nuestras pautas de estilo de la UI.
• Aprende cómo publicar tu extensión.