Get best of the week

Reactjs, Material-UI mit JSS. Kurzanleitung

Guten Tag, Habr!

So Material-ui ist reactJS ‚s Rahmen für die schnelle fertige Lösungen Google und ziemlich einfache Web - Entwicklung.

Material-UI ist eine ziemlich große Bibliothek, in der der Hauptteil der Reaktionskomponenten und des Stils @ material-ui / core ist (das Ziel ihrer Verwendung sollte ein ziemlich großes Projekt sein).

Dieses Tutorial enthält keine fortgeschrittene Verwendung von Material-UI. Dies ist ein Mini-Handbuch zum Stylen von Komponenten.

Die Verwendung von Materialkomponenten ist wirklich nicht schwierig, aber es gibt Nuancen bei der Verwendung von Styling. Dies wird tatsächlich diskutiert.

Folgendes berücksichtigen


  1. JSS und ein wenig über Syntax;
  2. Stilisierung der Klassenreaktion, Materialkomponenten;
  3. Stilisierung der Funktion unter Verwendung von Haken aus reaktionsfähigen Materialkomponenten;
  4. Styling durch styledComponent reagieren, Materialkomponenten;
  5. Themenanbieter;
  6. Überschreiben von Materialkomponenten;

GO Katze!


1. JSS und ein wenig über die Syntax


JSS (Bibliothek) - Styling von CSS in Javascript-Sprache in einem deklarativen Stil mit einem Gewicht von 6 KB, ausgenommen die Installation von Plugins. JSS ist nicht im Inline-Stil kompiliert und kann zur Vermeidung von Konflikten wiederverwendet werden, indem eindeutige Klassennamen generiert werden. Es kann serverseitig in nodejs arbeiten und hat die Erweiterung [.js]. In jss gibt es keine Einschränkung beim Festlegen von Stilen für Pseudoselektoren oder Pseudoelemente und dergleichen. Beschrieben von jss im Stil von camelCase. Eines der Hauptmerkmale von jss ist die Möglichkeit eines architektonischen Ansatzes bei der Beschreibung von Stilen.

Ja, und dieses Ding wird in der Material-Benutzeroberfläche als Semantik verwendet.

Um mit der Verwendung von jss zu beginnen, müssen Sie die spezifische Methode aufrufen, die als Parameter ein Objekt von Stilen umgestürzt hat, das eine Funktion zurückgibt , indem Sie einen Generator von jss-Klassen aufrufen, zum Beispiel:

/ 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. Stylingklasse reagieren, Materialkomponenten


React hat die Unterstützung für das Schreiben von Schnittstellen für Klassen nicht aufgegeben. Die folgenden Stile werden in den Klassenmaterialkomponenten verwendet:

/ 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. Stilisierung der Funktion unter Verwendung von Haken aus reaktionsfähigen Materialkomponenten


Ab der 16.8-Version von React hat sich beim Schreiben von Schnittstellen für Hooks eine neue Möglichkeit ergeben:

/ 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 mit styledComponent reagieren, Materialkomponenten


StyledComponent - das Prinzip des Stils von Komponenten ohne eine Methode, die eine Funktion zum Generieren von Klassen zurückgibt.

/ 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. Themenanbieter.


Theming ist die Bereitstellung von Standardstilen für ein Projekt oder einen Teil davon, da Komponenten verschachtelt sind, die konzeptionell dem Kontext in React ähnlich sind. In Material-ui ist standardmäßig bereits ein vorgefertigtes Designobjekt festgelegt. Sie können es jedoch selbst erstellen, nachdem Sie es zuvor über den Anbieter verfügbar gemacht haben, sodass Sie eine Funktion mit dem Designobjekt als Argument für Materialmethoden zum Schreiben von Stilen bereitstellen :

/ 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. Überschreiben von Materialkomponenten


In material-ui hat jede Komponente ihre eigenen Stile festgelegt, dh der Import einer beliebigen Materialkomponente liefert eine bereits gestaltete Komponente mit den verfügbaren Klassen. Erstellen eines Themas mit der speziellen Material-API - createMuiTheme kann nicht nur ein Thema bereitstellen, sondern auch die angegebenen Standardklassen von Materialkomponenten mithilfe der speziellen Überschreibungseigenschaft überschreiben , z. B.:

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

Zusammenfassung:

  • JSS und seine Funktionen;
  • JSS-Styling reagieren, Materialkomponenten durch API-Material-UI;

Quellcode: https://gitlab.com/ImaGadzhiev/material-style-components

More articles:


All Articles