Get best of the week

Reactjs, Material-UI dengan JSS. Panduan singkat

Selamat siang, Habr!

Jadi material-ui adalah kerangka kerja reactJS yang menyediakan solusi siap pakai google untuk pengembangan web yang cepat dan cukup sederhana.

Material-UI adalah perpustakaan yang cukup besar, di mana bagian kunci dari komponen reaksi dan gaya adalah @ material-ui / core (tujuan penggunaannya harus proyek yang agak besar).

Tutorial ini tidak termasuk penggunaan lanjutan material-ui. Ini adalah manual mini untuk komponen penataan gaya.

Menggunakan komponen material sebenarnya tidak sulit, tetapi ada nuansa menggunakan styling. Ini sebenarnya akan dibahas.

Pertimbangkan yang berikut ini


  1. JSS dan sedikit tentang sintaksis;
  2. Stilasi reaksi kelas, komponen bahan;
  3. Stilasi fungsional menggunakan kait reaksi, komponen material;
  4. Styling melalui reaksi gaya, komponen bahan;
  5. Penyedia tema;
  6. Komponen material utama;

GO kucing!


1. JSS dan sedikit tentang sintaksis


JSS (perpustakaan) - menata css dalam bahasa Javascript dalam gaya deklaratif dengan berat 6kb, tidak termasuk pemasangan plugin. JSS tidak dikompilasi menjadi inline-style dan dapat digunakan kembali, menghindari konflik, dengan menghasilkan nama kelas yang unik. Ia memiliki kemampuan untuk bekerja melalui sisi-server di nodejs dan memiliki ekstensi [.js]. Dalam jss tidak ada batasan pada pengaturan gaya untuk pseudo-selektor atau elemen semu dan sejenisnya. Dijelaskan oleh jss dalam gaya camelCase. Salah satu fitur kunci dari jss adalah kemungkinan pendekatan arsitektur dalam deskripsi gaya.

Ya, dan benda ini digunakan dalam material-ui sebagai semantik.

Untuk mulai menggunakan jss, Anda perlu memanggil metode spesifiknya, setelah dibatalkan sebagai parameter objek gaya, yang akan mengembalikan fungsi, dengan memanggil yang kita akan mendapatkan generator kelas jss, misalnya:

/ 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. Kelas styling bereaksi, komponen material


Bereaksi belum memberikan dukungan untuk menulis antarmuka di kelas. Gaya berikut digunakan dalam komponen material kelas:

/ 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. Stilisasi fungsional menggunakan kait reaksi, komponen material


Dimulai dengan rilis 16.8 dari React, sebuah peluang baru telah muncul dalam penulisan antarmuka pada kait:

/ 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. Penataan gaya dengan reaksi komponen, komponen bahan


StyledComponent - prinsip komponen penataan tanpa metode yang mengembalikan fungsi untuk menghasilkan kelas.

/ 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. Penyedia tema.


Mereka adalah penyediaan gaya default untuk suatu proyek, atau bagian dari itu, diberi komponen bersarang, secara konseptual mirip dengan konteks dalam Bereaksi. Material-ui sudah memiliki objek siap pakai tema default, tetapi Anda dapat membuatnya sendiri sesuai dengan kebutuhan Anda, setelah sebelumnya membuatnya tersedia melalui penyedia, dengan cara ini Anda akan memberikan fungsi dengan objek tema sebagai argumen, untuk metode materi untuk gaya penulisan, misalnya :

/ 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. Komponen material utama


Dalam material-ui, setiap komponen sudah memiliki gaya yang sesuai, yaitu, impor komponen material apa pun akan memberikan komponen yang sudah ditata dengan kelas yang tersedia. Membuat tema menggunakan api bahan khusus - createMuiTheme tidak hanya dapat memberikan tema, tetapi juga menimpa kelas standar yang ditentukan dari komponen material menggunakan properti penggantian khusus , misalnya:

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

Ringkasan:

  • JSS dan fitur-fiturnya;
  • Reaksi gaya JSS, komponen material melalui api material-ui;

Kode sumber: https://gitlab.com/ImaGadzhiev/material-style-components

More articles:


All Articles