A, aboutcss-in-jsThe understanding of the

  • 1.css-in-jsIs a CSS processing solution that uses JS to write CSS styles. It can be implemented in many ways, such asstyled-components,polished,glamorous(Paypal open source, no longer maintained),radium,emotionAnd so on.
  • One of the most mature isstyled-componentsandemotion. They are truly componentizedstyleIt was built specifically for React.

Second,styled-componentsIntroduction to the

Styled – Components is the mainstream implementation plan for CSS-in-JS and for the componentized style.

The following are some characteristics of styled- Components:

  • Unique class names: Similar to CSS-Module, unique class names are generated to avoid duplication and global pollution, and do not require you to think about how to name them.

  • 2. No redundant CSS code: its styles are bound to components, and the styles work when the components are called. That means you don’t have to worry about detecting and removing unused CSS code.

  • Dynamic style: It is easy to adjust and extend the style of a component without creating many classes to maintain the style of the component.

  • Auto-add compatibility prefixes: Similar to Autoprefixer, auto-add browser compatibility prefixes to support older browsers.

  • 5. Support variables and inheritance: You can use variables to set different styles by passing a single parameter to the style component.

Three,styled-componentsuse

  • 1, install,

    npm install styled-components
Copy the code

  • 2, use,

    Styled – Components call tag functions primarily based on ES6’s tag template syntax

    import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style extends Component {
  render() {
    return (
      <>
        <div>
          <Title>I am heading</Title>
        </div>
      </>)}}// Use the es6 template string (the following indicates that the h1 style is defined)
const Title = styled.h1` font-size: 20px; color: #f00; `
Copy the code

  • 3. Use of nesting

    import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style extends Component {
  render() {
    return (
      <>
        <div>
          <Content>
            <h2>hello</h2>
            <div className="content">I am content</div>
          </Content>
        </div>
      </>)}}const Content = styled.div` width: 100%; height: 500px; border: 1px solid #f00; > h2 { color: pink; } > .content { text-align: center; color: #f00; } `
Copy the code

  • Use props to pass parameters

    import React, { Component } from 'react'
import styled, { css } from 'styled-components'

export default class Style2 extends Component {
  render() {
    return (
      <div>
        <Button>submit</Button>
        <Button primary>submit</Button>
      </div>)}}const Button = styled.button` font-size: 1em; margin: 1em; Padding: 0.25 em 1 em; border-radius: 5px; color: palevioletred; border: 2px solid palevioletred; cursor: pointer;${props =>
    props.primary &&
    css`
      border: 2px solid mediumseagreen;
      color: mediumseagreen;
    `}
`
Copy the code

  • 5. Inheritance of styles

import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style3 extends Component {
  render() {
    return (
      <div>
        <Button>submit</Button>
        <ExtendingButton>submit</ExtendingButton>
      </div>)}}const Button = styled.button` background: palevioletred; color: white; `

const ExtendingButton = styled(Button)` font-size: 18px; padding: 5px 25px; `
Copy the code

Four, the use ofsass

Projects created using create-React-app are sass-enabled but need to be installed

  • 1, install,

    npm install node-sass
Copy the code

  • 2. Direct use

    import React, { Component } from 'react'
import './style4.scss'

export default class Style4 extends Component {
  render() {
    return (
      <div>
        <div className="title">I am heading</div>
      </div>)}}Copy the code

Fifth, usecss-module

Projects created using create-React-app support CSS-Module by default

  • 1. Style files must be named in the form [name].module. CSS or [name].module.scss

  • Import styles from ‘./style.module.css’;

  • ClassName ={styles. Title}

    import React, { Component } from 'react'
import styles from './Style5.module.scss'

export default class Style5 extends Component {
  render() {
    return (
      <div>
        <div className={styles.title}>I am heading</div>
      </div>)}}Copy the code
    <div class="Style5_title__lsl4D"></div>
Copy the code

  • 4. If you don’t want to use the default hash

    :global(.wrap) {
  color: green;
}
Copy the code
    // Direct use
<h2 className="wrap"> hello < / h2 >Copy the code

  • 5. Inheritance of styles

    .className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className; // Inherit directly from above
  color: yellow;
}

.title {
  composes: className from './another.css'; // Use the external style sheet directly
  color: red;
}
Copy the code