Detailed explanation of the solution to introduce advanced usage of CSS in React

1. What is it

Select the right one for component developmentcssThe solution is especially important

The following rules are usually followed:

• You can write local css, and you will not pollute the nativeness in other components at will;
• You can write dynamic css, which can obtain some states of the current component and generate different css styles according to the changes in states;
• Supports all css features: pseudo-classes, animations, media queries, etc.;
• It is simple and convenient to write, and it is best to conform to the consistent characteristics of CSS style

In this regard,vueusecssIt's simpler to look:

• Writing styles through style tags
• The scoped attribute determines whether the written style is locally valid
• lang attribute setting preprocessor
• Inline style style way to set and change css according to the latest state

And inreactIntroduceCSSNot as good asVueConvenient and concise, its introductioncssThere are many ways, each with its pros and cons

2. Method

CommonCSSThe introduction methods are as follows:

Introduce .css file directly into components Introduce .files in JSUse directly within the component

Writing directly in the componentcssStyle, bystyleThe attributes are directly introduced, as follows:

import React from "react";
//Camel nomenclature declaration attributeconst div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  
  minHeight: "200px",
  boxSizing: "border-box"
};
export default const App = () => {
  constructor(props, context) {
    super(props);
  }
  render() {
    return (
     <div>
       <div style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

You can see above,cssThe attribute needs to be converted into camel writing method

Advantages of this method:

• Inline styles, there will be no conflict between styles
• You can dynamically get the status in the current state

shortcoming:

• The camel mark is required in writing
• Some styles have no prompts
• Lots of styles, confusing code
• Some styles cannot be written (such as pseudo-classes/pseudo-elements)

Introduce css file into the component

WillcssWrite it alone in onecssFile, then directly import it in the component

document:

.title {
  color: red;
  font-size: 20px;
}
.desc {
  color: green;
  text-decoration: underline;
}

Introduced in the components:

import React, { PureComponent } from 'react';
import Home from './Home';
import './';
export default const App = () => {
  render() {
    return (
      <div className="app">
        <h2 className="title">I amAppTitle</h2>
        <p className="desc">I amAppA text description in</p >
        <Home/>
      </div>
    )
  }
}

The disadvantage of this method is that the styles are effective globally and the styles will affect each other.

Introduced . files in components

WillcssFiles are introduced as a module, all of which are in this modulecss, only acts on the current component. Will not affect the descendants of the current component

This waywebpackThe solution only requires configurationwebpackIn the configuration filemodules:trueJust

import React, { PureComponent } from 'react';
import Home from './Home';
// ("root")
import styles from "./";
export default const App = () => {
  render() {
    return (
      <div className={}>
        <h2 className="title">I amAppTitle</h2>
        <p className="desc">I amAppA text description in</p >
        <Home/>
      </div>
    )
  }
}

This method can solve local scope problems, but it also has certain shortcomings:

• The referenced class name cannot be used with the connector (.xxx-xx), and is not recognized in JavaScript.
• All classNames must be written in the form of {}
• It is not convenient to modify certain styles dynamically, and it still requires the use of inline styles;

CSS in JS

CSS-in-JS refers to a pattern, whereCSSDepend onJavaScriptGenerate instead of define in external files

This feature is not part of React, but is provided by third-party libraries, such as:

• styled-components
• emotion
• glamorous

The main thing to see belowstyled-componentsBasic use

The essence is to create a component through the call of a function:

• This component will be automatically added with a non-repeat class
• styled-components will add relevant styles to the class

Basic use is as follows:

Create aFiles are used to store style components:

export const SelfLink = `
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;
export const SelfButton = `
  height: 150px;
  width: 150px;
  color: ${props => };
  background-image: url(${props => });
  background-size: 150px 150px;
`;

It is also very simple to introduce style components:

import React from "react";
import { SelfLink, SelfButton } from "./style";
export default const App = () =>{
  constructor(props, context) {
    super(props);
  }  
  render() {
    return (
     <div>
       <SelfLink title="People's *"></SelfLink>
       <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
          SelfButton
        </SelfButton>
     </div>
    );
  }
}

3. Difference

Through the introduction of the above four styles, you can see:

• Using css directly in the component is easy to write, and it is easy to modify style attributes according to the state, but a large number of demonstrations can easily lead to confusion in the code
• The introduction of .css files into the component is in line with our daily writing habits, but the scope is global and the styles are stacked.
• Introduced. Files can solve local scope problems, but are not convenient to dynamically modify styles. They need to use inline to write styles.
• The css in js method can satisfy the application of most scenarios, and can nest, define, modify state, etc. like the preprocessor.

As for usereactWhich solution to introducecss, there is no absolute answer, you can choose the appropriate solution according to your respective situation

This is the end of this article about the detailed explanation of the advanced usage of CSS in React. For more related CSS content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!