Reactjs, Material-UI with JSS. Краткий гайд

Доброго времени суток, хабр!

Итак, material-ui — reactJS‘s фрэймворк, предоставляющий готовые google решения для быстрой и довольно простой web разработки.
Material-UI достаточно крупная библиотека, где ключевой частью react компонентов и стилизации является @material-ui/core (целью ее использования должен быть немаленький проект).

Этот туториал не включает в себя продвинутое использование material-ui. Это мини мануал по стилизации компонентов.
Использовать material компоненты действительно не сложно, но есть нюансы использования стилизации. Об этом собственно и пойдет речь.

Рассмотрим следующее:

1. JSS и немного о синтаксисе;
2. Стилизация классовых react, material компонентов;
3. Стилизация функциональных с использованием хуков react, material компонентов;
4. Стилизация посредством styledComponent react, material компонентов;
5. Провайдер theme;
6. Переопределение material компонентов;

GO под кат!

1. JSS и немного о синтаксисе.

JSS(библиотека) — стилизация css на языке Javascript в декларативном стиле весом в 6кб, без учета установки плагинов. JSS не компилируется в inline-style и может повторно переиспользоваться, избегая конфликтов, за счет генерации уникальных имен классов. Имеет возможность работать посредством server-side в nodejs и имеет расширение [.js]. В jss нет ограничения на установку стилей для псевдо-селекторов или псевдо-элементов и подобном. Описывается jss в стиле camelCase. Одной из ключевых возможностей jss — возможность архитектурного подхода в описании стилей.
Да, и эта штука используется в material-ui в качестве семантики.

Для того чтобы начать использовать jss необходимо вызвать его определенный метод опрокинув в качестве аргумента объект стилей, который вернет функцию, вызвав которую мы получим генератор jss классов, например:

/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. Стилизация классовых react, material компонентов.

React не отказался от поддержки написания интерфейсов на классах. Следующим образом используются стили в классовых material компонентов:

/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. Стилизация функциональных с использованием хуков react, material компонентов.

Начиная с 16.8 релиза React появилась новая возможность в написании интерфейсов на хуках:

/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. Стилизация посредством styledComponent react, material компонентов.

StyledComponent — принцип стилизации компонентов без метода, возвращающего функцию для генерации классов.

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

Theming — это предоставление дефолтных стилей проекту, либо его части, учитывая вложенность компонентов, концептуально схож с контекстом в React. В material-ui уже есть готовый объект theme заданный по умолчанию, но вы можете создать его сами под свои нужды, предварительно обеспечив его доступность через provider, таким образом вы предоставите функцию с объектом theme в качестве аргумента, для методов material по написанию стилей, например:

/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. Переопределение material компонентов.

В material-ui каждому компоненту уже установлены соответсвующие стили, то есть импорт любого material компонента предоставит уже стилизованный компонент с имеющимися классами. Создание theme посредством специального api material — createMuiTheme можно не только предоставить theme, но и переопределять заданные дефолтные классы material компонентов посредством специального свойства overrides, например:

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

Итоги:

• JSS и его особенности;
• JSS стилизация react, material компонентов за счет api material-ui;

Исходный код: https://gitlab.com/ImaGadzhiev/material-style-components