Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the way to introduce css into react?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what is the way to introduce css into react?"

Preface

It is very important for component development to choose the right css solution.

The following rules are usually followed:

You can write a local css without polluting the natives in other components at will

Dynamic css can be written, some states of the current component can be obtained, and different css styles can be generated according to the change of state.

Supports all css features: pseudo classes, animation, media queries, etc.

It is simple and convenient to write, and had better conform to the consistent css style.

In this respect, vue is more concise with css:

Styling with style tags

The scoped attribute determines whether the written style is locally valid.

The lang property sets the preprocessor

Inline style to set and change css according to the latest status

In react, the introduction of CSS is not as convenient and simple as Vue. There are many ways to introduce css, each of which has its own advantages and disadvantages.

Mode

Common ways to introduce CSS are as follows:

Use directly within the component

Introduce .css files into the component

Introduce the .module.css file into the component

CSS in JS

Within the component

Write the css style directly in the component and introduce it directly through the style attribute, as follows:

Import React, {Component} from "react"; const div1 = {width: "300px", margin: "30px auto", backgroundColor: "# 44014C", / / Hump minHeight: "200px", boxSizing: "border-box"}; class Test extends Component {constructor (props, context) {super (props);} render () {return (123);}} export default Test

As you can see above, the css property needs to be converted to hump writing in this way:

Inline styles, there will be no conflict between styles

You can dynamically obtain the status in the current state

Disadvantages:

The hump logo is required in the writing.

Some styles are not prompted

A lot of styles, messy code.

Some styles cannot be written (such as pseudo-classes / pseudo-elements)

Introduce the css file into the component

Write css in a separate css file, and then introduce it directly into the component

App.css file:

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

Component introduces:

Import React, {PureComponent} from 'react';import Home from'. / Home';import'. / App.css';export default class App extends PureComponent {render () {return (I am the title of App and I am a text description in App)}

The downside of this approach is that the style takes effect globally, and the styles will influence each other.

Introduce the .module.css file into the component

The css file is introduced as a module in which all css acts only on the current component. Will not affect the descendant components of the current component

This is the solution of webpack agents, and you only need to configure modules:true in the webpack configuration file.

Import React, {PureComponent} from 'react';import Home from'. / Home';import'. / App.module.css';export default class App extends PureComponent {render () {return (I am the title of App and I am a text description in App)}

This approach can solve the problem of local scope, but it also has some defects:

The referenced class name, which cannot use a connector (. Xxx-xx), is not recognized in JavaScript

All className must be written in the form of {style.className}

It is not convenient to modify some styles dynamically, but you still need to use inline styles.

CSS in JS

CSS-in-JS, a pattern in which CSS is generated by JavaScript rather than defined in an external file

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

Styled-components

Emotion

Glamorous

Let's take a look at the basic use of styled-components

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

This component is automatically added with a non-repeating class

Styled-components will add relevant styles to the class

The basic uses are as follows:

Create a style.js file to hold the style components:

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

Introducing style components is also simple:

Import React, {Component} from "react"; import {SelfLink, SelfButton} from ". / style"; class Test extends Component {constructor (props, context) {super (props);} render () {return (app.js SelfButton);}} export default Test; distinction

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

It is convenient to use css directly in the component, and it is easy to modify the style properties according to the state, but a large number of demonstration writing can easily lead to code confusion.

Introducing .css files into components is in line with our daily writing habits, but the scope is global and styles are cascading.

The introduction of .module.css file can solve the problem of local scope, but it is not convenient to modify the style dynamically, so it is necessary to write the style inline.

Through the method of css in js, it can satisfy the application of most scenes, and can nest, define, modify the state and so on like the preprocessor.

The above is about the content of this article on "what is the way to introduce css into react". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.