@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. Material-UI visa fornecer uma base sólida para a criação de interfaces de usuário dinâmicas. 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 inline 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 * as 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>;
}

<Button className={classes.root}>Styled with Hook API</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 * as 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>;
}

<MyButton>Styled with styled-components API</MyButton>

Higher-order component API

import * as 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',
      },
    },
  },
});

This is red since it is inside the root.

This is green since it is inside the paragraph and this is blue since it is inside the span

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

<React.Fragment>
  <MyButton color="red">Red</MyButton>
  <MyButton color="blue">Blue</MyButton>
</React.Fragment>

Adaptando a styled components API

<React.Fragment>
  <MyButton color="red">Red</MyButton>
  <MyButton color="blue">Blue</MyButton>
</React.Fragment>

Adaptando a higher-order component API

<React.Fragment>
  <MyButton color="red">Red</MyButton>
  <MyButton color="blue">Blue</MyButton>
</React.Fragment>

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,
  }),
}));

theme color:

background-color property:

rendered 1 times
color: #ffffff
backgroundColor: #2196f3

@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';