Get best of the week

Reactjs, Material-UI avec JSS. Petit guide

Bonjour, Habr!

Donc, material-ui est le framework de reactJS fournissant des solutions prêtes à l'emploi pour un développement web rapide et assez simple.

Material-UI est une bibliothèque assez importante, où la partie clé des composants React et du style est @ material-ui / core (l'objectif de son utilisation devrait être un projet assez important).

Ce didacticiel n'inclut pas l'utilisation avancée de material-ui. Ceci est un mini manuel pour styliser les composants.

L'utilisation de composants matériels n'est vraiment pas difficile, mais il existe des nuances dans l'utilisation du style. Ce sera en fait discuté.

Considérer ce qui suit


  1. JSS et un peu de syntaxe;
  2. Stylisation de classe réagissent, composants matériels;
  3. Stylisation du fonctionnel en utilisant des crochets de réactif, des composants matériels;
  4. Styling par styledComponent react, composants matériels;
  5. Fournisseur de thème;
  6. Remplacer les composants matériels;

Allez chat!


1. JSS et un peu de syntaxe


JSS (bibliothèque) - style css en langage Javascript dans un style déclaratif pesant 6kb, hors installation de plugins. JSS n'est pas compilé en style en ligne et peut être réutilisé, évitant les conflits, en générant des noms de classe uniques. Il a la capacité de fonctionner côté serveur dans nodejs et possède l'extension [.js]. Dans jss, il n'y a pas de restriction sur la définition des styles pour les pseudo-sélecteurs ou pseudo-éléments et similaires. Décrit par jss dans le style de camelCase. L'une des principales caractéristiques de jss est la possibilité d'une approche architecturale dans la description des styles.

Oui, et cette chose est utilisée dans la matière-ui comme sémantique.

Pour commencer à utiliser jss, vous devez appeler sa méthode spécifique, ayant retourné en paramètre un objet de styles, qui renverra une fonction, en appelant laquelle nous obtiendrons un générateur de classes jss, par exemple:

/ 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. La classe de style réagit, les composants matériels


React n'a pas abandonné la prise en charge de l'écriture d'interfaces sur les classes. Les styles suivants sont utilisés dans les composants de matériau de 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. Stylisation du fonctionnel à l'aide de crochets de composants réactifs et matériels


Depuis la version 16.8 de React, une nouvelle opportunité est apparue en écrivant des interfaces sur les 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 avec styledComponent react, composants matériels


StyledComponent - le principe de stylisation des composants sans méthode qui renvoie une fonction pour générer des 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. Fournisseur de thème.


Le thème est la fourniture de styles par défaut pour un projet, ou une partie de celui-ci, étant donné l'imbrication des composants, conceptuellement similaire au contexte dans React. Material-ui a déjà un objet prêt à l'emploi de thème par défaut, mais vous pouvez le créer vous-même pour répondre à vos besoins, après l'avoir préalablement rendu disponible via le fournisseur, de cette façon, vous fournirez une fonction avec l'objet de thème comme argument, pour les méthodes matérielles d'écriture de styles, par exemple :

/ 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. Remplacement des composants matériels


Dans material-ui, chaque composant a déjà les styles correspondants, c'est-à-dire que l'importation de n'importe quel composant matériel fournira un composant déjà stylisé avec les classes disponibles. Création d'un thème à l'aide de l'API de matériau spécial - createMuiTheme peut non seulement fournir un thème, mais également remplacer les classes par défaut spécifiées de composants de matériau à l'aide de la propriété de substitution spéciale , par exemple:

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

Sommaire:

  • JSS et ses fonctionnalités;
  • Le style JSS réagit, les composants du matériau à travers l'api material-ui;

Code source: https://gitlab.com/ImaGadzhiev/material-style-components

More articles:


All Articles