Get best of the week

Reactjs, Material-UI com JSS. Guia breve

Bom dia, Habr!

Portanto, material-ui é a estrutura do reactJS , fornecendo soluções prontas para o Google para um desenvolvimento rápido e bastante simples na Web.

A UI do material é uma biblioteca bastante grande, onde a parte principal dos componentes e estilo de reação é @ material-ui / core (o objetivo de seu uso deve ser um projeto bastante grande).

Este tutorial não inclui o uso avançado do material-ui. Este é um mini manual para modelar componentes.

O uso de componentes de material não é realmente difícil, mas há nuances no uso de estilos. Isso será realmente discutido.

Considere o seguinte


  1. JSS e um pouco sobre sintaxe;
  2. Estilização de classe reagir, componentes materiais;
  3. Estilização de funções usando ganchos de reação, componentes materiais;
  4. Styling através de styledComponent reage, componentes materiais;
  5. Provedor de temas;
  6. Substituindo componentes de material;

GO cat!


1. JSS e um pouco sobre sintaxe


JSS (biblioteca) - denominando css na linguagem Javascript em um estilo declarativo de 6kb, excluindo a instalação de plug-ins. O JSS não é compilado no estilo embutido e pode ser reutilizado, evitando conflitos, gerando nomes de classe exclusivos. Ele tem a capacidade de trabalhar pelo lado do servidor no nodejs e possui a extensão [.js]. No jss, não há restrição para definir estilos para pseudo-seletores ou pseudo-elementos e similares. Descrito por jss no estilo camelCase. Um dos principais recursos do jss é a possibilidade de uma abordagem arquitetural na descrição dos estilos.

Sim, e isso é usado na interface do usuário material como semântica.

Para começar a usar jss, você precisa chamar seu método específico, tendo revertido como parâmetro um objeto de estilos, que retornará uma função, chamando o qual obteremos um gerador de classes jss, por exemplo:

/ src / components / JssComponent
JssComponent.js

import React from "react";

import useStyles from "./style";

export default function JssComponent() {
  //      jss
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <h1>That's JssComponent</h1>
      <h2 className="basic_h2">I use JSS</h2>
      <div className={classes.content_div}>
        Any Text
      </div>
    </div>
  );
}

style.js

//     ,        jss
import { createUseStyles } from "react-jss";

const rootStyle = {
  width: 400,
  border: "1px solid grey",
  margin: "0px auto",
  padding: 15
};

const fontStyle = {
  fontWeight: "bold",
  fontStyle: "italic"
};

const useStyles = createUseStyles({
  root: {
    ...rootStyle,
    "& h1": {
      textAlign: "center",
      color: "purple"
    },
    "& .basic_h2": {
      textAlign: "right",
      color: "green",
      cursor: "pointer",
      "&:hover": {
        color: "purple"
      }
    }
  },
  content_div: {
    textAlign: "justify",
    ...fontStyle
  }
});

export default useStyles;

2. A classe de estilo reage, componentes materiais


O React não desistiu de suporte para escrever interfaces nas classes. Os seguintes estilos são usados ​​nos componentes de material da classe:

/ src / components / ClassComponent
ClassComponent.js

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

import styles from "./style";

class ClassComponent extends React.Component {
  render() {
    const { classes } = this.props;

    return <Button className={classes.button}>ClassComponent</Button>;
  }
}

//      
export default withStyles(styles)(ClassComponent);

style.js

//  js    
const styles = {
    button: {
      backgroundColor: "grey",
      border: 0,
      borderRadius: 3,
      boxShadow: "0 3px 5px 2px",
      color: "black",
      height: 48,
      padding: "0 30px",
      margin: 10
    }
  };
  
  export default styles;

3. Estilização de funcional usando ganchos de reagir, componentes materiais


A partir da versão 16.8 do React, surgiu uma nova oportunidade na criação de interfaces em hooks:

/ src / components / HookComponent
HookComponent.js

import React from "react";
import Button from "@material-ui/core/Button";

import useStyles from "./style";

const HookComponent = props => {
  //     
  const classes = useStyles();

  return <Button className={classes.button}>HookComponent</Button>;
};

export default HookComponent;

style.js

//     ,         
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  button: {
    backgroundColor: "grey",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px",
    color: "black",
    height: 48,
    padding: "0 30px",
    margin: 10
  }
});

export default useStyles;

4. Styling com styledComponent reagem, componentes materiais


StyledComponent - o princípio de estilizar componentes sem um método que retorna uma função para gerar classes.

/ src / components / StyledComponent
StyledComponent.js

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

import styles from './style';

//     
const ButtonComponent = styled(Button)({ ...styles });

export default function StyledComponent() {
  return <ButtonComponent>StyledComponent</ButtonComponent>;
}

style.js

//  js    
const styles = {
    backgroundColor: "grey",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px",
    color: "black",
    height: 48,
    padding: "0 30px",
    margin: 10
  };

  export default styles;

5. Provedor de temas.


Theming é a provisão de estilos padrão para um projeto, ou parte dele, dado o aninhamento de componentes, conceitualmente semelhante ao contexto no React. A interface do usuário do Material já possui um objeto pronto para o tema padrão, mas você pode criá-lo para atender às suas necessidades, disponibilizando-o anteriormente através do provedor. Dessa forma, você fornecerá uma função com o objeto do tema como argumento, para métodos materiais para escrever estilos, por exemplo :

/ src / components
App.js

import React from 'react';
import { ThemeProvider } from "@material-ui/core/styles";

import  ThemedComponent from './ThemedComponent/ThemedComponent';
import theme from './theme';

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

export default App;

theme.js

//  js   
const theme = {
    button: {
      backgroundColor: "grey",
      border: 0,
      borderRadius: 3,
      boxShadow: "0 3px 5px 2px",
      color: "black",
      height: 48,
      padding: "0 30px"
    }
  };

  export default theme;

/ src / components / ThemedComponent
ThemedComponent.js

import React from "react";

import useStyles from "./style";

const ThemedComponent = props => {
    //     
  const classes = useStyles();

  return <button className={classes.button}>ThemedComponent</button>;
};

export default ThemedComponent;

style.js

//      theme
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => {
  return {
    button: { ...theme.button, margin: 10 }
  };
});

export default useStyles;

6. Substituição de componentes de material


Na interface do usuário do material, cada componente já possui os estilos correspondentes, ou seja, a importação de qualquer componente do material fornecerá um componente já estilizado com as classes disponíveis. Criando um tema usando a api de material especial - createMuiTheme pode não apenas fornecer um tema, mas também substituir as classes padrão especificadas de componentes de material usando a propriedade overrides especiais , por exemplo:

/ src / components
App.js

import React from 'react';
import { ThemeProvider } from "@material-ui/core/styles";

import CreatedThemeComponent from './CreatedThemeComponent/CreatedThemeComponent';
import createdTheme from './createdTheme';

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

export default App;

/ src / components
createdTheme.js

//          material  
import { createMuiTheme } from "@material-ui/core/styles";

const createdTheme = createMuiTheme({
    //  
    overrides: {
      MuiButton: {
        root: {
          color: "red",
          border: "1px solid grey",
          margin: 10
        }
      }
    }
  });
  
export default createdTheme;

/ src / components / CreatedThemeComponent
CreatedThemeComponent.js

import React from "react";
import { Button } from "@material-ui/core";

const CreatedThemeComponent = props => {
  return <Button>CreatedThemeComponent</Button>;
};

export default CreatedThemeComponent;

Resumo:

  • JSS e seus recursos;
  • O estilo JSS reage, componentes do material através da API material-ui;

Código fonte: https://gitlab.com/ImaGadzhiev/material-style-components

More articles:


All Articles