1. Inline style

To add inline styles to the virtual DOM, you need to use expressions to pass in style objects

An inline style needs to be written to a style object, which can be placed in many places

For example, in the render function, on the component prototype, and in the external chain JS file

Note: there are two parentheses here. The first indicates that we want to insert JS in JSX, and the second is the parenthesis of the object

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

2. Use class

React recommends that we use inline style, because react thinks that each component is an independent whole

In fact, in most cases, we are still adding 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 class JS code, we will receive the current JS rules, and class is a keyword)

import React, { Component } from 'react'
import styles from './style.css'

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

export default ClassStyle

3. Classnames add different styles for different conditions

Sometimes different styles need to be added according to different conditions, such as completion status, green for completion and red for unfinished. In this case, we recommend using the package class names:

Purpose:

Because react-native dynamically adds multiple class names, an error will be reported

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

To get the final rendering effect:

<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, which is simply to write CSS in JS. NPM link

The traditional front-end scheme advocates the principle of “separation of concerns”. HTML, CSS and JavaScript should perform their respective duties and be separated.

In the react project, component-based scheme is advocated, which naturally forms a way of centralized writing and management of HTML, CSS and JavaScript.

styled components

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

install

npm i -S styled-components

Define style

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

Use the title just as you would with a regular react component

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

Style inheritance

style

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

const Button2 = styled(Button)`
    color: blue;
    border-color: yellow;
`;

export {
    Button,
    Button2
}

display

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

Attribute transfer

style

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

display

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