This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

The React based

Inline styles, imported style sheets, CSSmodule, CSS management advancements

Inline style

<div style={{fontSize:18,color:red}}>Content Here</div>

Note here that the CSS property names can be written as camel names

The style value in JSX is an object that needs to be wrapped around {}

Introducing style sheets

This one is more commonly used

listItem.css

.title{
    font-size: 20px;
    color: #710000;
}
Copy the code

listItem.jsx

import React, {Component} from 'react' import './ listitem.css 'class App extends Component {render(){ <span className="title"> </span>}}Copy the code

The shortcomings of introducing stylesheets

The style that’s written in this way is global when it’s finally packaged, it causes style pollution,

To solve this problem, the CSSmodule that will be introduced soon will be introduced

CSSmodule

The CSSmodule is not unique to React, but is a front-end engineering solution

Global pollution

Rename the previous listitem.css file to listitem.module.css

The contents of the listitem.module. CSS file remain unchanged

import React, {Component} from 'react' import style from './ listitem.module. CSS '// Listitem.css makes use of class App extends Component {render(){<span className={style.title}> title </span>}}Copy the code

You’ll notice that the class suffix is unique

Complex Case 1

The same.module. CSS file uses compose

listItem.module.css

.common{
    text-decoration: underline;
    text-indent: 2em;
}

.title{
    composes: common;
    font-size:20px;
    color: #710000;
}
Copy the code

Complex Case 2

Different.module. CSS files use compose,import

common.module.css

.common {
    text-decoration: underline;
    text-indent: 2em;
}
Copy the code

listItem.module.css

.title {
    composes: common from 'common.module.css'
    font-size:20px;
    color: #710000;
}
Copy the code

summary

Solve global pollution, name confusion, no dependency management

  • Instead of using a selector, use the class name to define the style
  • Instead of cascading classes, use a class definition style
  • Compose with compose

Advanced CSS management

CSS Management Tool

  • Styled – component portal
  • Classnames NPM page portal Github portal

CSS class library through JS to solve the CSS does not have the function, variables, loops, functions and so on

Styled-component

slightly

Classnames 

Install command

npm install classnames --save
Copy the code

Use the code

// reference classnames import style from './ listitem.module. CSS 'import classnames from 'classnames/bind' import cn from Bind (style) let count = 0 // CLS makes it easy to write multiple class styles const _cn = cn({'theme-grid-col-s':! count}) .... return <span className={cls('title','list-title')}>{this.props.data.name}</> <div className={`col-2 themed-grid-col` + _cn}> ...Copy the code

I used two Classnames examples to get a feel for the power of the CSS class library

conclusion

CSS in React.

  • Because it’s JSX, you can use JS to write inline styles,
  • Traditional styles imported from CSS files are packaged as global styles, resulting in global style contamination
  • CSSmodule is introduced to address global style pollution
  • CSS class library, moving bricks generally do not use, if someone in the company use, or can consider. Explore more in your own projects

PS:

React is the most basic part of the end, there is no very convoluted theory, it is basically based on other people’s code, do not need to understand. Because React is designed that way for you to use it.

React starts with event handling, state, lifecycle, and component design patterns. The difficulty comes up, the learning is done. Here must understand clearly, those easy to mistake the point and the actual use of the scene to be combined. Maybe the fun is still ahead, heh heh…

Reference links:

CSS module www.ruanyifeng.com/blog/2016/0…

Use CSS to precompile juejin. Im /post/ 5c3D67…

styled component www.styled-components.com/