@material-ui/styles

Você pode usar a solução de estilo do Material-UI na sua aplicação, esteja ou não usando componentes de Material-UI.

Material-UI visa fornecer uma base sólida para a criação de interfaces de usuário dinâmicas. Por uma questão de simplicidade, expomos a solução de estilo usada nos componentes do Material-UI como pacote, @material-ui/styles. Você pode usá-la, mas você não é obrigado, já que Material-UI também é interoperável com todas as outras soluções de estilo principais.

Por que usar a solução de estilo do Material-UI?

Nas versões anteriores, o Material-UI usava o LESS, e em seguida, uma solução customizada no estilo em linha para escrever os estilos dos componentes, mas essas abordagens provaram ser limitadas. Uma solução CSS-em-JS supera muitas destas limitações, e libera excelentes funcionalidades(aninhamento de temas, estilos dinâmicos, auto-suporte etc.).

A solução de estilo do Material-UI é inspirada em muitas outras bibliotecas de estilo, como styled-components e emotion.

• 💅 Você pode esperar as mesmas vantagens que styled-components.
• 🚀 Ela é super rápida.
• 🧩 É extensível através de uma API de plugin.
• ⚡️Ela usa JSS em seu núcleo – um alto desempenho JavaScript para o compilador CSS, que funciona em tempo de execução e no lado do servidor.
• 📦 Menor que 15 KB gzipped; e nenhum aumento no tamanho do pacote se usado juntamente com o Material-UI.

Instalação

@material-ui/styles é re-exportada como @material-ui/core/styles - você só precisa instalá-la se desejar usá-la independentemente do Material-UI.

Para instalar e salvar em suas dependências do package.json, execute:

// utilizando o npm
npm install @material-ui/styles

// utilizando o yarn
yarn add @material-ui/styles

Primeiros passos

Existem 3 APIs possíveis que você pode usar para gerar e aplicar estilos, no entanto, todas elas compartilham a mesma lógica subjacente.

Hook API

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

Styled components API

Nota: isso se aplica somente para a sintaxe de chamada – definições de estilo ainda usam um objeto JSS. Você também pode alterar esse comportamento, com algumas limitações.

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

export default function StyledComponents() {
  return <MyButton>Styled Components</MyButton>;
}

Higher-order component API

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

Aninhamento de seletores

Você pode aninhar seletores para segmentar elementos dentro da classe ou componente atual. O exemplo a seguir usa a Hook API, mas funciona da mesma maneira com as outras APIs.

const useStyles = makeStyles({
  root: {
    color: 'red',
    '& p': {
      color: 'green',
      '& span': {
        color: 'blue'
      }
    }
  },
});

Adaptando com base em propriedades

Você pode passar uma função para makeStyles ("interpolação") a fim de adaptar o valor gerado com base nas propriedades do componente. A função pode ser fornecida no nível da regra de estilo ou no nível da propriedade CSS:

const useStyles = makeStyles({
  // regra de estilo
  foo: props => ({
    backgroundColor: props.backgroundColor,
  }),
  bar: {
    // propriedade CSS
    color: props => props.color,
  },
});

function MyComponent() {
  // Propriedades simuladas para fins de exemplo
  const props = { backgroundColor: 'black', color: 'white' };
  // Passe as propriedades como primeiro argumento do useStyles()
  const classes = useStyles(props);

  return <div className={`${classes.foo} ${classes.bar}`} />
}

Este componente botão tem uma propriedade de cor que modifica sua cor:

Adaptando a hook API

Adaptando a styled components API

Adaptando a higher-order component API

Teste de estresse

No teste de estresse a seguir, você pode atualizar a cor do tema e a propriedade background-color de forma interativa:

const useStyles = makeStyles(theme => ({
  root: props => ({
    backgroundColor: props.backgroundColor,
    color: theme.color,
  }),
}));

@material-ui/core/styles vs @material-ui/styles

Os estilos do Material-UI são disponibilizados no pacote @material-ui/styles (construído com JSS). Esta solução está isolada. Ela não tem um tema padrão e pode ser usada para estilizar aplicações React que não estão usando componentes Material-UI.

Para reduzir o número de pacotes a instalar, quando usando o Material-UI, e para simplificar as importações, os módulos de @material-ui/styles são reexportados em @material-ui/core/styles.

Para remover a necessidade de fornecer sistematicamente um tema, o tema padrão do Material-UI é aplicado aos módulos reexportados makeStyles, styled, withTheme, useTheme, e withStyles.

Por exemplo:

// Reexportação com um tema padrão
import { makeStyles } from '@material-ui/core/styles';

// Módulo original sem um tema padrão
import { makeStyles } from '@material-ui/styles';