Introduction to seven methods of using css in react (with code)

This article brings you an introduction to seven methods of using CSS in react (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The first one: Use the style directly in the component

No need for the component to import css files from the outside, just write it directly in the component.

import React, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //驼峰法
  minHeight: "200px",
  boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
     <div>
       <div>123</div>
       <div>
     </div>
    );
  }
}

export default Test;<p> Notes: <br>1. In normal css, such as background-color, box-sizing and other attributes, the attributes in the style object p1 must be converted into camel case, backgroundColor, boxSizing . Properties without hyphens, such as margin, width, etc., remain unchanged in the style object. <br>2. In normal css, the value of css does not need to be quoted in double quotes (""), such as </p>
<pre class="brush:php;toolbar:false">.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

3. You cannot directly use strings to write style, and an error will be reported

<div>
<p><img src="https://img.php.cn/upload/image/171/466/819/1553917250154517.png" title="1553917250154517.png" alt="Introduction to seven methods of using css in react (with code)"></p>
<p>When using the style object in react. Values ​​must be enclosed in double quotes. </p>
<p>This method of react style only applies to the current component. </p>
<p style="white-space: normal;">Second: Introduce the [name].css file into the component</p>
<p>You need to use import at the beginning of the current component to introduce the css file. </p>
<pre class="brush:php;toolbar:false">import React, { Component } from "react";
import TestChidren from "./TestChidren";
import "@/assets/css/index.css";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
      <div>
        <div>123</div>
        <testchidren>测试子组件的样式</testchidren>
      </div>

    );
  }
}

export default Test;

The css styles introduced in this way will apply to the current component and all its descendant components.

Third method: 3. Introduce the [name].scss file into the component

React already supports files with the suffix scss, so you only need to install node -sass is enough, because with node-sass, scss files can be compiled into css files in the node environment.

>yarn add node-sass

Then write the scss file

//index.scss
.App{
  background-color: #282c34;
  .header{
    min-height: 100vh;
    color: white;
  }
}

For details on how to use sass, please check the sass official website

The css style introduced in this way will also affect The current component and all its descendant components.

Fourth method: Introduce the [name].module.css file into the component

Introduce the css file as a module. All css in this module only Acts on the current component. Does not affect descendant components of the current component.

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.css";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <div>321321</div>
       <testchild></testchild>
     </div>
    );
  }
}

export default Test;

This method can be seen as an upgraded version of the first method of using style in components. Completely separate css and components without affecting other components.

The fifth way: introduce the [name].module.scss file into the component

Similar to the fourth way, the difference is that the fourth way introduces the css module, and This is just introducing the scss module.

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.scss";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <div>321321</div>
       <testchild></testchild>
     </div>
    );
  }
}

export default Test;

The same method can be regarded as an upgraded version of the first method of using style in components.

Sixth: Using styled-components

You need to install

>yarn add styled-components

first and then create a js file (note that it is a js file, not a css file )

//style.js
import styled, { createGlobalStyle } from "styled-components";

export const SelfLink = styled.p`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;

export const SelfButton = styled.p`
  height: 150px;
  width: 150px;
  color: ${props => props.color};
  background-image: url(${props => props.src});
  background-size: 150px 150px;
`;

Use styled-components style in components

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <selflink>app.js</selflink>
       <selfbutton>
          SelfButton
        </selfbutton>
     </div>
    );
  }
}

export default Test;

This method is to merge the entire css style and html node into one component. Introducing this component has both html and css.
The advantage is that you can dynamically change the style at any time by uploading attributes to the component. It is more convenient for processing variables, media queries, pseudo-classes, etc.

This method of css is only valid for the current component.

For specific usage, please check the styled-components official website

Seventh method: Use radius

You need to install it first

>yarn add radium

and then Directly introducing and using

import React, { Component } from "react";
import Radium from 'radium';

let styles = {
  base: {
    color: '#fff',
    ':hover': {
      background: '#0074d9'
    }
  },
  primary: {
    background: '#0074D9'
  },
  warning: {
    background: '#FF4136'
  }
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
      <button>
        this is a primary button
      </button>
     </div>
    );
  }
}

export default Radium(Test);

in react components is inconvenient for processing variables, media queries, pseudo-classes, etc.

Using Radium, you can directly handle variables, media queries, pseudo-classes, etc., and you can directly use mathematics, connections, regular expressions, conditions, functions, etc. in js.

Please check the official website of radius for specific usage

Note:Before exporting, it must be wrapped with Radium.

This article has ended here. For more other exciting content, you can pay attention to the CSS Video Tutorial column of the PHP Chinese website!