Get best of the week

Reactjs, Material-UI con JSS. Guía breve

Buen dia, Habr!

Por lo tanto, material-ui es el marco de trabajo de reactJS que proporciona soluciones preparadas de Google para un desarrollo web rápido y bastante simple.

Material-UI es una biblioteca bastante grande, donde la parte clave de los componentes y el estilo de reacción es @ material-ui / core (el objetivo de su uso debería ser un proyecto bastante grande).

Este tutorial no incluye el uso avanzado de material-ui. Este es un mini manual para el diseño de componentes.

El uso de componentes materiales no es realmente difícil, pero existen matices de usar el estilo. Esto se discutirá realmente.

Considera lo siguiente


  1. JSS y un poco sobre sintaxis;
  2. Estilización de clase reacciona, componentes materiales;
  3. Estilización de funcional utilizando ganchos de reacción, componentes de material;
  4. Diseño a través de componentes de material reaccionados, componentes de material;
  5. Proveedor de temas;
  6. Componentes de material primordiales;

GO cat!


1. JSS y un poco sobre la sintaxis


JSS (biblioteca): diseño de CSS en lenguaje Javascript en un estilo declarativo que pesa 6 kb, excluyendo la instalación de complementos. JSS no está compilado en estilo en línea y puede reutilizarse, evitando conflictos, generando nombres de clase únicos. Tiene la capacidad de trabajar a través del lado del servidor en nodejs y tiene la extensión [.js]. En jss no hay restricciones para configurar estilos para pseudo-selectores o pseudo-elementos y similares. Descrito por jss en el estilo de camelCase. Una de las características clave de jss es la posibilidad de un enfoque arquitectónico en la descripción de los estilos.

Sí, y esta cosa se usa en material-ui como semántica.

Para comenzar a usar jss, debe llamar a su método específico, habiendo volcado como parámetro un objeto de estilos, que devolverá una función, llamando al cual obtendremos un generador de clases jss, por ejemplo:

/ 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. Clase de estilo reaccionar, componentes del material


React no ha renunciado a la compatibilidad para escribir interfaces en clases. Los siguientes estilos se utilizan en los componentes de material de clase:

/ 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. Estilización de funcional utilizando ganchos de reacción, componentes materiales


Comenzando con la versión 16.8 de React, ha aparecido una nueva oportunidad al escribir interfaces en 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. Estilo con estilo Reactivo de componente, componentes de material


StyledComponent: el principio de diseñar componentes sin un método que devuelva una función para generar clases.

/ 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. Proveedor de temas.


El tema es la provisión de estilos predeterminados para un proyecto, o parte de él, dada la anidación de componentes, conceptualmente similares al contexto en React. Material-ui ya tiene un objeto predeterminado listo para el tema, pero puede crearlo usted mismo para satisfacer sus necesidades, habiéndolo puesto a disposición previamente a través del proveedor, de esta manera proporcionará una función con el objeto del tema como argumento, para métodos de materiales para escribir estilos, por ejemplo :

/ 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. Componentes de material primordiales


En material-ui, cada componente ya tiene los estilos correspondientes, es decir, la importación de cualquier componente de material proporcionará un componente ya diseñado con las clases disponibles. Crear un tema usando la api de material especial - createMuiTheme no solo puede proporcionar un tema, sino que también puede anular las clases predeterminadas especificadas de componentes de material usando la propiedad de anulaciones especiales , por ejemplo:

/ 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;

Resumen:

  • JSS y sus características;
  • JSS styling react, componentes del material a través de api material-ui;

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

More articles:


All Articles