This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

In this article, we learned about the React JSX syntax, the lifecycle, the communication between components, and the various React Hooks. Today, we learned about the React Hooks

Style Scoped is just as easy to style as Vue. It’s also easy to style native applets in WXSS files on their own pages. React, however, has CSS style scoping issues to worry about.

Faced with this problem, I have learned the following solutions:

First, the original writing method

How to do it: Define the corresponding style object in the function, then specify this object in the style attribute in the tag (note: attributes need to be camel named)

render() {
    const styleText = {
        backgroundColor : 'red'
    }
    return (
        <div>
            <h1 style={styleText}>Hello React</h1>
        </div>)}Copy the code

But I personally feel that if I need too many styles, I feel very messy.

CSS IN JS

As the name suggests, it is to write CSS with JS. I think it is an improvement on the native writing method. The simplest way is that we can define a JS file to write each style object, and finally import and use it in the component that uses the style

// This is the style.js file that defines various styles
const TextStyle = {
    fontSize:'20px'.color:'blue'
}
export default {
    TextStyle
}
// This is a file that uses the style TextStyle
import Style from './Css/Style'.render() {
    return (
        <div>
            <h1 style={Style.TextStyle}>Hello React</h1>
        </div>)}Copy the code

You can get the following effect:

By writing CSS as objects, we can make good use of THE JS manipulation of objects for various styles of play, such as:

  1. To define aBasic styleIf there is a need for change, we can customize it on this basis
  2. Can also be based on the conditions of the labelStyleQuickly switch styles and even combine styles

A code example is as follows:

// Style DIY
const BaseStyle = {
    backgroundColor : 'blue'.fontSize : '20px'
}
constNewStyle = { ... BaseStyle,fontSize : '16px'.fontWeight : 'bolder'
}

// Style toggle and condition selection
<div  style={ this.state.theme === "dark" ? Style.DarkStyle : Style.LightStyle } >Hello React</div>

// Style merge<div style={ { ... Style.AStyle , ... Style.BStyle } }>Hello React<div>Copy the code

This is indeed a lot of convenience, but this is also a trouble, because we are writing objects, so we define each attribute (such as backgroundColor) is not writing CSS code prompt, so we have to be very careful when writing whether there are spelling errors.

Using the CSS IN JS library: Let’s take a look at one of the more popular libraries, style-Components

npm install styled-components 
Copy the code

Import the Styled – Components library in style.js and use it

import Styled from 'styled-components';
Copy the code

Let’s summarize some basic usage methods:

  1. Let’s say the top importsStyled, we can passStyled. LabelTo get a correspondingThe labelComponents (Styled.buttonReturns abuttonButton component)
  2. If we want to change the style of the component returned in the previous step, we can change it in theStyle. The labelIt is followed by a ‘symbolCSSProperty, and you can write it normallyCSSI don’t need to write any morefontSizethe

The rest of the operations are done in code:

1.styled-componentsDefining button components

import Styled from 'styled-components';
const Button = Styled.button` background-color:blue; font-size:16px `
export default {
    Button
}
/ / use
import Style from './Css/Style'; .render() {
    return (
        <>
            <Style.Button>Send</Style.Button>
        </>)}Copy the code

2. Bystyled-componentSet elementattrs(This is an exampleplaceholder)

Practice: Styled. Input. Arrts ({})

const Input = Styled.input.attrs({
    placeholder:"Hello"
})` width:120px; height:30px; font-weight:bolder; `
/ / use
return (
    <>
        <Style.Input />
    </>
)
Copy the code

3. Set the property of the component variable when used

To do this, write ${props => props. XXX} or ${props => props[‘ XXX ‘]} after a CSS property such as background

const Div = Styled.div`
    background-color : ${ props => props.bgClr || props["bgClrNew"] | |'white' }
`
Copy the code

4. Component inheritance

Styled can be inherited via styled(existing components), and style changes can be made via the back connection

const Input = Styled.input.attrs({
    placeholder:"Hello"
})` width:120px; height:30px; font-weight:bolder; `
// NewInput inherits Input
const NewInput = Styled(Input).attrs({
    placeholder:"React"
})` background-color : red `
/ / use
<Style.NewInput />
Copy the code