Interoperabilidade da Biblioteca de Estilo

Enquanto você pode usar a solução de estilo baseada em emotion fornecida pelo Material-UI para estilizar sua aplicação, você também pode usar o que você já conhece e ama (desde CSS simples a styled-components).

Este guia tem como objetivo documentar as alternativas mais populares, mas você deve descobrir que os princípios aplicados aqui podem ser adaptados para outras bibliotecas. Existem exemplos para as seguintes soluções de estilo:

CSS puro
CSS global
Styled Components
Módulos CSS
Emotion

CSS puro

Nada extravagante, apenas CSS.

PlainCssSlider.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

PlainCssSlider.js

import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import './PlainCssSlider.css';

export default function PlainCssSlider() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className="slider" />
    </div>
  );
}

Ordem de injeção do CSS ⚠️

Nota: A maioria das soluções CSS-in-JS injetam seus estilos na parte inferior do HTML <head>, que dá precedência ao Material-UI sobre seus estilos customizados. Para remover a necessidade de !important, você precisa alterar a ordem de injeção do CSS. Aqui está uma demonstração de como isso pode ser feito para o motor de estilo padrão - emotion:

import * as React from 'react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const cache = createCache({
  key: 'css',
  prepend: true,
});

export default function PlainCssPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Sua árvore de componentes. Agora você pode sobrescrever os estilos do Material-UI. */}
    </CacheProvider>
  );
}

Elementos mais profundos

Se você tentar estilizar o Slider, você provavelmente gostaria de afetar alguns dos elementos filhos de Slider, por exemplo o thumb. No Material-UI, todos os elementos filhos têm uma especificidade aumentada de 2: .parent .child {}. Ao escrever uma sobrescrita, você precisa fazer o mesmo.

Os exemplos a seguir substituem o estilo de thumb do controle slider, além dos estilos customizados no slider em si.

PlainCssSliderDeep1.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .MuiSlider-thumb {
  border-radius: 1px;
}

PlainCssSliderDeep1.js

import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import './PlainCssSliderDeep1.css';

export default function PlainCssSliderDeep1() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className="slider" />
    </div>
  );
}

A demonstração acima depende dos valores padrão de className, mas você pode fornecer seu próprio nome de classe com a API componentsProps.

PlainCssSliderDeep2.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .thumb {
  border-radius: 1px;
}

PlainCssSliderDeep2.js

import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import './PlainCssSliderDeep2.css';

export default function PlainCssSliderDeep2() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider
        defaultValue={30}
        className="slider"
        componentsProps={{ thumb: { className: 'thumb' } }}
      />
    </div>
  );
}

CSS global

Fornecer explicitamente os nomes das classes ao componente é um esforço excessivo? Você pode segmentar os nomes de classe gerados por Material-UI.

GlobalCssSlider.css

.MuiSlider-root {
  color: #20b2aa;
}

.MuiSlider-root:hover {
  color: #2e8b57;
}

GlobalCssSlider.js

import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import './GlobalCssSlider.css';

export default function GlobalCssSlider() {
  return <Slider defaultValue={30} />;
}

Ordem de injeção do CSS ⚠️

Nota: A maioria das soluções CSS-in-JS injetam seus estilos na parte inferior do HTML <head>, que dá precedência ao Material-UI sobre seus estilos customizados. Para remover a necessidade de !important, você precisa alterar a ordem de injeção do CSS. Aqui está uma demonstração de como isso pode ser feito para o motor de estilo padrão - emotion:

import * as React from 'react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const cache = createCache({
  key: 'css',
  prepend: true,
});

export default function GlobalCssPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Sua árvore de componentes. Agora você pode sobrescrever os estilos do Material-UI. */}
    </CacheProvider>
  );
}

Elementos mais profundos

Se você tentar estilizar o Slider, você provavelmente gostaria de afetar alguns dos elementos filhos de Slider, por exemplo o thumb. No Material-UI, todos os elementos filhos têm uma especificidade aumentada de 2: .parent .child {}. Ao escrever uma sobrescrita, você precisa fazer o mesmo.

O exemplo a seguir substituem o estilo de thumb do controle slider, além dos estilos customizados no slider em si.

GlobalCssSliderDeep.css

.MuiSlider-root {
  color: #20b2aa;
}

.MuiSlider-root:hover {
  color: #2e8b57;
}

.MuiSlider-root .MuiSlider-thumb {
  border-radius: 1px;
}

GlobalCssSliderDeep.js

import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import './GlobalCssSliderDeep.css';

export default function GlobalCssSliderDeep() {
  return <Slider defaultValue={30} />;
}

Styled Components

npm

Alterar o motor de estilo padrão

Por padrão, os componentes do Material-UI vêm com emotion como seu motor de estilo. Se, no entanto, você gostaria de usar styled-components, você pode configurar sua aplicação seguindo este projeto de exemplo. Seguir esta abordagem reduz o tamanho do pacote e remove a necessidade de configurar a ordem de injeção de CSS.

Após o motor de estilo estar configurando adequadamente, você pode usar o utilitário experimentalStyled() de @material-ui/core/styles e ter acesso direto para o tema.

import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import { experimentalStyled as styled } from '@material-ui/core/styles';

const CustomizedSlider = styled(Slider)`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }
`;

export default function StyledComponents() {
  return <CustomizedSlider defaultValue={30} />;
}

Elementos mais profundos

Se você tentar estilizar o Slider, você provavelmente gostaria de afetar alguns dos elementos filhos de Slider, por exemplo o thumb. No Material-UI, todos os elementos filhos têm uma especificidade aumentada de 2: .parent .child {}. Ao escrever uma sobrescrita, você precisa fazer o mesmo.

Os exemplos a seguir substituem o estilo de thumb do controle slider, além dos estilos customizados no slider em si.

import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import { experimentalStyled as styled } from '@material-ui/core/styles';

const CustomizedSlider = styled(Slider)`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }

  & .MuiSlider-thumb {
    border-radius: 1px;
  }
`;

export default function StyledComponentsDeep1() {
  return (
    <div>
      <Slider defaultValue={30} />
      <CustomizedSlider defaultValue={30} />
    </div>
  );
}

A demonstração acima depende dos valores padrão de className, mas você pode fornecer seu próprio nome de classe com a API componentsProps.

import * as React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';

const CustomizedSlider = styled((props) => (
  <Slider componentsProps={{ thumb: { className: 'thumb' } }} {...props} />
))`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }

  & .thumb {
    border-radius: 1px;
  }
`;

export default function StyledComponentsDeep2() {
  return (
    <div>
      <Slider defaultValue={30} />
      <CustomizedSlider defaultValue={30} />
    </div>
  );
}

Tema

Ao usar o provedor de tema do Material-UI, o tema estará disponível no contexto do tema do motor de estilo também (emotion ou styled-components, dependendo da sua configuração).

⚠️ Se você já estiver usando um tema customizando com styled-components ou emotion, ele pode não ser compatível com a especificação do tema do Material-UI. Se ele não é compatível, você precisa renderizar o ThemeProvider do Material-UI primeiro. Isto irá garantir que as estruturas do tema estejam isoladas. Isso é ideal para a adoção progrressiva dos componentes da base de código do Material-UI.

Você é encorajado a compartilhar o mesmo objeto de tema entre Material-UI e o resto de seu projeto.

const CustomizedSlider = styled(Slider)(
  ({ theme }) => `
  color: ${theme.palette.primary.main};

  :hover {
    color: ${darken(theme.palette.primary.main, 0.2)};
  }
`,
);

Portais

A fazer: preencha esta seção após o portal ser implementado com o novo motor de estilo.

Módulos CSS

É difícil saber a participação de mercado nesta solução de estilo, pois é dependente da solução de empacotamento que as pessoas estão usando.

CssModulesSlider.module.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

CssModulesSlider.js

import React from 'react';
import Slider from '@material-ui/core/Slider';
// webpack, parcel ou qualquer que irá injetar o CSS na página
import styles from './CssModulesSlider.module.css';

export default function CssModulesSlider() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className={styles.slider} />
    </div>
  );
}

Ordem de injeção do CSS ⚠️

Nota: A maioria das soluções CSS-in-JS injetam seus estilos na parte inferior do HTML <head>, que dá precedência ao Material-UI sobre seus estilos customizados. Para remover a necessidade de !important, você precisa alterar a ordem de injeção do CSS. Aqui está uma demonstração de como isso pode ser feito para o motor de estilo padrão - emotion:

import * as React from 'react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const cache = createCache({
  key: 'css',
  prepend: true,
});

export default function CssModulesPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Sua árvore de componentes. Agora você pode sobrescrever os estilos do Material-UI. */}
    </CacheProvider>
  );
}

Elementos mais profundos

Se você tentar estilizar o Slider, você provavelmente gostaria de afetar alguns dos elementos filhos de Slider, por exemplo o thumb. No Material-UI, todos os elementos filhos têm uma especificidade aumentada de 2: .parent .child {}. Ao escrever uma sobrescrita, você precisa fazer o mesmo.

Os exemplos a seguir substituem o estilo de thumb do controle slider, além dos estilos customizados no slider em si.

CssModulesSliderDeep1.module.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .MuiSlider-thumb {
  border-radius: 1px;
}

CssModulesSliderDeep1.js

import React from 'react';
// webpack, parcel ou qualquer que irá injetar o CSS na página
import styles from './CssModulesSliderDeep1.module.css';
import Slider from '@material-ui/core/Slider';

export default function CssModulesSliderDeep1() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className={styles.slider} />
    </div>
  );
}

A demonstração acima depende dos valores padrão de className, mas você pode fornecer seu próprio nome de classe com a API componentsProps.

CssModulesSliderDeep2.module.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .thumb {
  border-radius: 1px;
}

CssModulesSliderDeep2.js

import React from 'react';
// webpack, parcel ou qualquer que irá injetar o CSS na página
import styles from './CssModulesSliderDeep2.module.css';
import Slider from '@material-ui/core/Slider';

export default function CssModulesSliderDeep2() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider
        defaultValue={30}
        className={styles.slider}
        componentsProps={{ thumb: { className: styles.thumb } }}
      />
    </div>
  );
}

Emotion

npm

A propriedade `css`

O método css() do Emotion funciona perfeitamente com Material-UI.

/** @jsx jsx */
import { jsx, css } from '@emotion/react';
import Slider from '@material-ui/core/Slider';

export default function EmotionCSS() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider
        defaultValue={30}
        css={css`
          color: #20b2aa;

          :hover {
            color: #2e8b57;
          }
        `}
      />
    </div>
  );
}

Tema

Funciona exatamente como styled components. Você pode usar o mesmo guia.

A API `styled()`

Funciona exatamente como styled components. Você pode usar o mesmo guia.

Interoperabilidade da Biblioteca de Estilo

CSS puro

Ordem de injeção do CSS ⚠️

Elementos mais profundos

CSS global

Ordem de injeção do CSS ⚠️

Elementos mais profundos

Styled Components

Alterar o motor de estilo padrão

Elementos mais profundos

Tema

Portais

Módulos CSS

Ordem de injeção do CSS ⚠️

Elementos mais profundos

Emotion

A propriedade css

Tema

A API styled()

A propriedade `css`

A API `styled()`