Temática

Personaliza Material-UI con tu tema. Puedes cambiar los colores, la tipogradía y mucho más.

El tema especifica el color de los componentes, las obscuridad de las superficies, nivel de la sombra, opacidad apropiada de la tinta de los elementos, etc.

Los temas te permiten aplicar un tono consistente a tu aplicación. Le permite ** personalizar todos los aspectos de diseño ** de su proyecto para satisfacer las necesidades específicas de su negocio o marca.

Para promover una mayor coherencia entre las aplicaciones; claro y oscuro son los tipos de temas que están disponibles para elegir. Por defecto, los componentes utilizan el tema de tipo claro.

Proveedor de Tema

Si desea personalizar el tema, deberá de usar el componente ThemeProvider para inyectar un tema en su aplicación. Sin embargo, esto es opcional; Los componentes de material-UI vienen con un tema predeterminado.

ThemeProvider se basa en la característica de contexto de React para pasar el tema hacia los componentes que estén por dejabo. así que tendrá que asegurar que ThemeProvider sea un componente padre de los componentes que trata de personalizar. Puede aprender más acerca de esto en la sección API.

Variables de configuración de Tema

Cambiar las variables de configuración del tema es la forma más efectiva de adaptar Material-UI a sus necesidades. Las siguientes secciones cubren las variables de tema más importantes:

Puede consultar la sección de Tema predeterminado para ver el tema completo.

Variables personalizadas

When using Material-UI's theme with the styling solution or any others. Puede ser conveniente agregar variables adicionales al tema para que pueda usarlas en cualquier lugar. Por ejemplo:

<ThemeProvider theme={theme}>
  <CustomCheckbox />
</ThemeProvider>

Accediendo al tema en un componente

Usted puede acceder a las variables del tema dentro de sus componentes React.

Anidando el tema

Usted puedes anidar multiples proveedores de tema.

<ThemeProvider theme={outerTheme}>
  <Checkbox defaultChecked />
  <ThemeProvider theme={innerTheme}>
    <Checkbox defaultChecked />
  </ThemeProvider>
</ThemeProvider>

El tema interno sobreescribirá el tema exterior. Puede ampliar el tema externo proporcionando una función:

A note on performance

Las implicaciones de rendimiento de anidar el componente ThemeProvider están vinculados al trabajo de JSS detrás de escena. El punto principal a entender es que el CSS inyectado se almacena en caché con la siguiente tupla (styles, theme).

theme: Si proporciona un tema nuevo en cada renderizado, un nuevo objeto CSS será calculado e inyectado. Tanto para la consistencia de la interfaz de usuario, como para el rendimiento, es mejor renderizar un número limitado de objetos de tema.
styles: Cuanto más grande es el objeto de estilos, más trabajo se necesitará.

API

`createMuiTheme(options, ...args) => theme`

Generate a theme base on the options received.

Argumentos

options (Object): Takes an incomplete theme object and adds the missing parts.
...args (Array): Deep merge the arguments with the about to be returned theme.

Devuelve

theme (Object): A complete, ready to use theme object.

Ejemplos

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

`responsiveFontSizes(theme, options) => theme`

Generate responsive typography settings based on the options received.

Argumentos

theme (Object): The theme object to enhance.
options (Object [optional]):

breakpoints (Array<String> [optional]): Default to ['sm', 'md', 'lg']. Array of breakpoints (identifiers).
disableAlign (Boolean [optional]): Default to false. Whether font sizes change slightly so line heights are preserved and align to Material Design's 4px line height grid. This requires a unitless line height in the theme's styles.
factor (Number [optional]): Default to 2. This value determines the strength of font size resizing. The higher the value, the less difference there is between font sizes on small screens. The lower the value, the bigger font sizes for small screens. The value must be greater than 1.
variants (Array<String> [optional]): Default to all. The typography variants to handle.

Regresa

theme (Object): The new theme with a responsive typography.

Ejemplos

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);