Detailed explanation of DOM style setting in four react components

1. Inline styles

To add inline styles to the virtual DOM, you need to use an expression to pass in a style object. To implement inline styles, you need to write a style object, and this style object can be placed in many places, such as: in the render function, on the component prototype, in an external js file
Note: There are two brackets here. The first one indicates that we are inserting JS in JSX, and the second one is the bracket of the object.

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

2. Use class

React recommends that we use inline styles because React considers each component to be an independent entity.

In fact, in most cases, we still add a lot of class names to elements, but it should be noted that class needs to be written as className (because after all, we are writing js-like code and will receive js rules, and class is a keyword)

import React, { Component } from 'react'
1. Import styles defined externally import styles from './style.css'

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 for different classNames conditions

Sometimes you need to add different styles based on different conditions, such as completion status, completed is green, unfinished is red. In this case, we recommend using the classnames package:
Purpose:
Because react native dynamically adds multiple classNames, an error will be reported

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

The final rendering effect 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-components is a CSS-in-JS framework written for React. Simply put, it means writing CSS in JS. npm link

• Traditional front-end solutions advocate the principle of "separation of concerns". HTML, CSS, and JavaScript should perform their respective functions and be separated.
• In the react project, component-based solutions are more advocated, which naturally forms a way to centrally write and manage HTML, CSS, and JavaScript.

styled-components is probably the most popular library for CSS-in-JS. With styled-components, you can use ES6's tag template string syntax to define a series of CSS properties for the component that needs to be styled. When the JS code of the 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. Dynamically generated CSS selectors will have a small hash value to ensure global uniqueness to avoid style conflicts.

1. Installation

npm i -S styled-components

Defining styles
2. Style js file

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

Display it just like you would a regular React component using Title

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 = styled.button`
    font-size: 20px;
    border: 1px solid red;
    border-radius: 3px;
`;

// A new component that inherits Button and overrides some styles const 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 am a button 1</Button>
        <Button2>I am a button 2</Button2>
    </div>
    );
}
}
export default App

4. Attribute transfer style

import styled from 'styled-components'
const Input = styled.input`
    color: ${props => props.inputColor || "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 end of this article about how to set DOM styles in four react components. For more relevant react component DOM style content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!