Tell me what are the ways to introduce css in react and what are the differences

Preface

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

Way

CommonCSSThe introduction methods are as follows:

• Use directly within the component
• Introduce .css files into components
• Introduced . files in components
• CSS in JS

In the component

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

import React, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C", //Camel method  minHeight: "200px",
  boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
     <div>
       <div style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

export default Test;

You can see above,cssThe properties need 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 class App extends PureComponent {
  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 waywebpackAgent's solution only requires configurationwebpackIn the configuration filemodules:trueJust

import React, { PureComponent } from 'react';

import Home from './Home';

import './';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <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, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <SelfLink title="People's *"></SelfLink>
       <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
          SelfButton
        </SelfButton>
     </div>
    );
  }
}

export default Test;
Copy the code

the difference

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

• Use directly within the componentcssThis method is easy to write and can easily 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 article about what are the ways to introduce css in react and what is the difference. 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!