Detailed explanation of the DOM style setting method among react four components

1. In-line style

If you want to add inline styles to the virtual dom, you need to use the expression to pass the style object to achieve it.
The in-line style needs to be written into a style object, and the location of this style object can be placed in many places.
For example:renderIn the function, on the component prototype, in the external link js file
Note: Here are two brackets. The first one means that we insert JS into JSX, and the second one is the brackets of the object.

 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>

2. Use class

React recommends that we use inline styles because React feels that each component is an independent whole

In fact, in most cases, we are still adding class names to elements, but it should be noted thatclassNeed to be writtenclassName(Because after all, you are writing JS code, you will receive the current js rules, andclassIt's a keyword)

import React, { Component } from 'react'
1. External introduction of defined styles
import styles from './'

class ClassStyle extends Component {
  render() {
    // js logic    let className = cx({
      font: false
    })
    return (
      <>
        <div className={className}>hello</div>
        <p className='setstyle'>style</p>
        <DivContainer>
          world
        </DivContainer>
      <>
    )
  }
}

export default ClassStyle

3. Add different styles to classNames for different conditions

Sometimes different styles need to be added according to different conditions, such as: completion status, completion is green, and unfinished is red. So in this case, we recommend usingclassnamesThis package:
Purpose:
Since react adds multiple classNames natively, an error will be reported

import style from './'
<div className={style.class1 style.class2}</div>

The effect you want to get the final rendering is:

<div class='class1 class2'></div>

Download and install

npm i -S classnames

use

import classnames from 'classnames'
<div className=classnames({
    'class1': true,
    'class2': true
    )>
</div>

4、css-in-js

styled-componentsIt is a set of css-in-js framework written for React. In short, it is to write css in js.npm link

• Traditional front-end solutions advocate the principle of "separation of concerns", and HTML, CSS, and JavaScript should each perform their own duties and separate them.
• In react projects, component-based solutions are advocated, and naturally formed a centralized writing and management method of HTML, CSS, and JavaScript.

styled-components should be one of the most popular libraries in CSS-in-JS. Through styled-components, you can use the ES6 tag template string syntax to define a series of CSS properties for Components that require styled. When the JS code of this component is parsed and executed, styled-components will dynamically generate a CSS selector and insert the corresponding CSS style into the head tag in the form of a style tag. The dynamically generated CSS selector will have a small hash value to ensure global uniqueness to avoid style conflicts.

1. Installation

npm i -S styled-components

Define styles
2. Style js file

import styled from 'styled-components'
const Title = `
    color:red;
    font-size:16px;
    h3{
        color:blue;
        font-size:20px;
    }
`
export {
    Title
}

show
Use Title just like using regular React components

import React, { Component } from 'react'
import { Title } from './Styles'
class App extends Component {
render() {
    return (
        <div>
            <Title>
            I'm just a title
            <h3>Hello World</h3>
            </Title>
        </div >
        );
    }
}
export default App

3. Style inheritance
style

import styled from 'styled-components'
const Button = `
    font-size: 20px;
    border: 1px solid red;
    border-radius: 3px;
`;

// A new component that inherits Button, overloads some stylesconst Button2 = styled(Button)`
    color: blue;
    border-color: yellow;
`;

export {
    Button,
    Button2
}

show

import React, { Component } from 'react'
import {
Button,
Button2
} from './Styles'
class App extends Component {
render() {
    return (
    <div>
        <Button>I'm a button1</Button>
        <Button2>I'm a button2</Button2>
    </div >
    );
}
}
export default App

4. Properties pass
style

import styled from 'styled-components'
const Input = `
    color: ${props =>  || "blue"};
    border-radius: 3px;
`;
export {
    Input
}

show

import React, { Component } from 'react'
import { Input } from './Styles'
class App extends Component {
render() {
    return (
    <div>
        <Input defaultValue="Hello" inputColor="red"></Input>
    </div >
    );
}
}
export default App

This is the article about the DOM style setting method among react's four components. For more related react component DOM style content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!