Get best of the week

Reactjs，带有JSS的Material-UI。简短指南

美好的一天，哈伯！

因此material-ui是reactJS的框架，可为快速且相当简单的Web开发提供Google现成的解决方案。

Material-UI是一个相当大的库，其中React组件和样式的关键部分是@ material-ui / core（其使用目标应该是一个相当大的项目）。

本教程不包括material-ui的高级用法。这是样式手册的迷你手册。

使用材料组件确实并不困难，但是使用样式存在细微差别。实际上将对此进行讨论。

考虑以下


  1. JSS和一些语法。
  2. 程式化的类反应，物质成分；
  3. 使用反应钩，材料成分对功能进行样式化；
  4. 通过styledComponent进行样式反应，材质成分；
  5. 主题提供者；
  6. 覆盖材料的组成部分；

加油！


1. JSS和一些语法


JSS（库）-以声明性样式（6KB）用Javascript语言对CSS进行样式设置，不包括插件的安装。 JSS不会编译为内联样式，并且可以通过生成唯一的类名来重复使用，从而避免冲突。它具有在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还没有放弃对在类上编写接口的支持。类材料组件中使用以下样式：

/ 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的16.8版本开始，在钩子上编写接口出现了新的机会：

/ 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进行样式反应，材质组件


StyledComponent-样式化组件的原理，不带返回用于生成类的函数的方法的样式。

/ src /组件/ 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.主题提供者。


给定组件的嵌套，主题化是为项目或其一部分提供默认样式，概念上类似于React中的上下文。Material-ui已经有一个默认的主题现成对象，但是您可以自己创建它以适合您的需要，并且之前已经可以通过提供者使用它，这样，您将以主题对象作为参数提供一个函数，用于编写样式的材料方法，例如：

/ src /组件
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 /组件/ 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-ui中，每个组件已经具有相应的样式，也就是说，任何Material组件的导入都将为具有样式的组件提供可用的类。使用特殊材质的api创建主题-createMuiTheme不仅可以提供主题，还可以使用特殊的 overlays属性覆盖材质组件的指定默认类，例如：

/ 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 /
创建的组件

//          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 /组件/ 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样式会通过api material-ui进行反应，从而实现材料组件；

源代码： https : //gitlab.com/ImaGadzhiev/material-style-components

More articles:


All Articles