Temas

Customize Material-UI com seu tema. Você pode mudar as cores, a tipografia e muito mais.

O tema especifica a cor dos componentes, o escurecimento das superfícies, o nível de sombra, a opacidade apropriada dos elementos de tinta, etc.

Temas permitem que você aplique um tom consistente na sua aplicação. Ele permite que você customize todos os aspectos do design do seu projeto, para atender as necessidades específicas do seu negócio ou marca.

Para promover uma maior consistência entre os aplicativos, os temas claro e escuro estão disponíveis para escolha. Por padrão, os componentes usam o tema claro.

Provedor de Temas

Se você deseja personalizar o tema, você precisa usar o ThemeProvider componente para injetar um tema em sua aplicação. No entanto, isso é opcional; Material-UI componentes vêm com um tema padrão.

O ThemeProvider depende do recurso de contexto do React afim de passar o tema para baixo na árvore de componentes, então você precisa ter certeza de que o ThemeProvider é um pai dos componentes que você está tentando customizar. Você pode aprender mais sobre isso lendo a seção da API.

Variáveis de configuração do tema

Alterar as variáveis de configuração do tema é a maneira mais eficaz de combinar o Material-UI às suas necessidades. As seções a seguir abordam as variáveis mais importantes do tema:

• .paleta
• .tipografia
• .espaçamento
• .pontos de quebra
• .zIndex
• .transições
• .componentes

Você pode conferir a seção do tema padrão para ver tudo sobre o tema padrão.

Variáveis customizáveis

When using MUI's theme with MUI System or any other styling solution, it can be convenient to add additional variables to the theme so you can use them everywhere. Por exemplo:

const theme = createTheme({
  status: {
    danger: orange[500],
  },
});

WARNING: vars is a private field used for CSS variables support. It will throw an error if you try to use it:

createTheme({
  vars: { ... },
})

If you are using TypeScript, you would also need to use module augmentation for the theme to accept the above values.

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

Acessando o tema em um componente

The community has built great tools to build a theme:

• mui-theme-creator: A tool to help design and customize themes for the MUI component library. Inclui modelos de site básicos para mostrar vários componentes e como eles são afetados pelo tema
• create-mui-theme: É uma ferramenta online para criar temas de Material-UI por meio da ferramenta de cor do Material Design.

Acessando o tema em um componente

You can access the theme variables inside your functional React components using the useTheme hook:

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

Aninhando o tema

You can nest multiple theme providers.

The inner theme will override the outer theme. You can extend the outer theme by providing a function:

API

createTheme(options, ...args) => theme

Generate a theme base on the options received. Then, pass it as a prop to ThemeProvider.

Argumentos

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

import { deepmerge } from '@mui/utils';
import { createTheme } from '@mui/material/styles';

const theme = createTheme(deepmerge(options1, options2));

Retornos

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

Examples

import { createTheme } from '@mui/material/styles';
import { green, purple } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});

Argumentos

When the value for a theme option is dependent on another theme option, you should compose the theme in steps.

import { createTheme } from '@mui/material/styles';

let theme = createTheme({
  palette: {
    primary: {
      main: '#0052cc',
    },
    secondary: {
      main: '#edf2ff',
    },
  },
});

theme = createTheme(theme, {
  palette: {
    info: {
      main: theme.palette.secondary.main,
    },
  },
});

Think of creating a theme as a two-step composition process: first, you define the basic design options; then, you'll use these design options to compose other options.

WARNING: theme.vars is a private field used for CSS variables support. Please use another name for a custom object.

responsiveFontSizes(theme, options) => theme

Generate responsive typography settings based on the options received.

Retornos

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

• breakpoints (array<string> [optional]): Default to ['sm', 'md', 'lg']. Array of breakpoints (identifiers).
• disableAlign (bool [optional]): Default to false. Se os tamanhos de fonte mudam pouco, as alturas da linha são preservadas e alinhadas à altura da linha da grade em 4px do Material Design. Isso requer uma altura de linha sem unidade nos estilos do tema.
• factor (number [optional]): Default to 2. Este valor determina o fator de redimensionamento do tamanho da fonte. Quanto maior o valor, menor a diferença entre tamanhos de fonte em telas pequenas. Quanto menor o valor, maiores os tamanhos de fonte para telas pequenas. O valor deve ser maior que 1.
• variants (array<string> [optional]): Default to all. As variantes de tipografia para manipular.

Exemplos

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

Examples

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

unstable_createMuiStrictModeTheme(options, ...args) => theme

WARNING: Do not use this method in production.

Generates a theme that reduces the amount of warnings inside React.StrictMode like Warning: findDOMNode is deprecated in StrictMode.

Argumentos

Currently unstable_createMuiStrictModeTheme adds no additional requirements.

Retornos

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

Exemplos

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

Examples

import { unstable_createMuiStrictModeTheme } from '@mui/material/styles';

const theme = unstable_createMuiStrictModeTheme();

function App() {
  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
    </React.StrictMode>
  );
}

ThemeProvider

This component takes a theme prop and applies it to the entire React tree that it is wrapping around. It should preferably be used at the root of your component tree.

Props

Examples

import * as React from 'react';
import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}