Get best of the week

Reactjs, Material-UI with JSS. Short guide

Good day, Habr!

So material-ui is reactJS 's framework providing google ready-made solutions for fast and fairly simple web development.

Material-UI is a fairly large library, where the key part of react components and styling is @ material-ui / core (the goal of its use should be a rather big project).

This tutorial does not include advanced use of material-ui. This is a mini manual for styling components.

Using material components is really not difficult, but there are nuances of using styling. This will actually be discussed.

Consider the following


  1. JSS and a little about syntax;
  2. Stylization of class react, material components;
  3. Stylization of functional using hooks of react, material components;
  4. Styling through styledComponent react, material components;
  5. Theme provider;
  6. Overriding material components;

GO cat!


1. JSS and a little about syntax


JSS (library) - styling css in Javascript language in a declarative style weighing 6kb, excluding the installation of plugins. JSS is not compiled into inline-style and can be reused, avoiding conflicts, by generating unique class names. It has the ability to work through server-side in nodejs and has the extension [.js]. In jss there is no restriction on setting styles for pseudo-selectors or pseudo-elements and the like. Described by jss in the style of camelCase. One of the key features of jss is the possibility of an architectural approach in the description of styles.

Yes, and this thing is used in material-ui as semantics.

In order to start using jss, you need to call its specific method, having overturned as a parameter an object of styles, which will return a function, by calling which we will get a generator of jss classes, for example:

/ 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. Styling class react, material components


React has not given up support for writing interfaces on classes. The following styles are used in the class material components:

/ 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. Stylization of functional using hooks of react, material components


Starting with the 16.8 release of React, a new opportunity has appeared in writing interfaces on 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 with styledComponent react, material components


StyledComponent - the principle of styling components without a method that returns a function for generating 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. Theme provider.


Theming is the provision of default styles for a project, or part of it, given the nesting of components, conceptually similar to the context in React. Material-ui already has a default theme ready-made object, but you can create it yourself to fit your needs, having previously made it available through the provider, this way you will provide a function with the theme object as an argument, for material methods for writing styles, for example :

/ 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. Overriding material components


In material-ui, each component already has the corresponding styles, that is, the import of any material component will provide an already styled component with the available classes. Creating a theme using the special material api - createMuiTheme can not only provide a theme, but also override the specified default classes of material components using the special overrides property , for example:

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

Summary:

  • JSS and its features;
  • JSS styling react, material components through api material-ui;

Source code: https://gitlab.com/ImaGadzhiev/material-style-components

More articles:


All Articles