Introduction à sept méthodes d'utilisation du CSS dans React (avec code)

Cet article vous présente sept méthodes d'utilisation de CSS dans React (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le premier : utiliser le style directement dans le composant

Ne nécessite pas que le composant importe des fichiers CSS de l'extérieur et écrit directement dans le composant.

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>Remarques :<br>1. En CSS normal, tels que background-color, box-sizing et d'autres attributs, les attributs de l'objet de style p1 doivent être convertis en camel case, backgroundColor, boxSizing. . Les propriétés sans tirets, telles que la marge, la largeur, etc., restent inchangées dans l'objet de style. <br>2. En CSS normal, la valeur de CSS n'a pas besoin d'être citée entre guillemets (""), comme </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. Vous ne pouvez pas utiliser directement des chaînes pour écrire du style, et une erreur sera signalée

<div>
<p><img src="https://img.php.cn/upload/image/171/466/819/1553917250154517.png" title="1553917250154517.png" alt="Introduction à sept méthodes dutilisation du CSS dans React (avec code)"></p>
<p>Lors de l'utilisation de l'objet style en réaction. Les valeurs doivent être placées entre guillemets doubles. </p>
<p>Cette méthode de style de réaction s'applique uniquement au composant actuel. </p>
<p style="white-space: normal;">Deuxième : introduisez le fichier [name].css dans le composant </p>
<p>Vous devez utiliser import au début du composant actuel pour introduire le fichier css. </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;

Les styles CSS introduits de cette manière s'appliqueront au composant actuel et à tous ses composants descendants.

Troisième méthode : 3. Introduisez le fichier [name].scss dans le composant

React prend déjà en charge les fichiers avec le suffixe scss, il vous suffit donc d'installer node -sass suffit, car avec node-sass, les fichiers scss peuvent être compilés en fichiers CSS dans l'environnement de nœud.

>yarn add node-sass

Ensuite, écrivez le fichier scss

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

Pour plus de détails sur la façon d'utiliser sass, veuillez consulter le site officiel de sass

Le style CSS introduit de cette manière fonctionnera également sur le composant actuel et tous ses composants descendants .

Quatrième méthode : Introduire le fichier [name].module.css dans le composant

Introduire le fichier css en tant que module Tous les CSS de ce module Agit uniquement sur. le composant actuel. N'affecte pas les composants descendants du composant actuel.

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;

Cette méthode peut être considérée comme une version améliorée de la première méthode d'utilisation du style dans les composants. Séparez complètement les CSS et les composants sans affecter les autres composants.

La cinquième façon : introduire le fichier [name].module.scss dans le composant

est similaire à la quatrième façon, la différence est que la quatrième façon introduit le module css, et ceci ne fait que présenter le module scss.

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;

La même méthode peut être considérée comme une version améliorée de la première méthode d'utilisation du style dans les composants.

Sixième méthode : Pour utiliser des composants stylisés

vous devez d'abord installer

>yarn add styled-components

puis créer un fichier js (notez qu'il est un fichier js, pas un fichier css)

//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;
`;

Utilisez le style styled-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;

dans le composant. Cette méthode combine l'ensemble du style CSS et le nœud html en un seul. composant. L'introduction de ce composant contient à la fois du HTML et du CSS.
L'avantage est que vous pouvez changer dynamiquement le style à tout moment en passant des attributs au composant. Il est plus pratique pour traiter des variables, des requêtes multimédias, des pseudo-classes, etc.

Cette méthode de CSS n'est valable que pour le composant actuel.

Pour une utilisation spécifique, veuillez consulter le site officiel de styled-components

Septième méthode : utiliser le rayon

Vous devez d'abord l'installer

>yarn add radium

Ensuite, introduire et utiliser directement

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);

dans le composant React n'est pas pratique pour traiter des variables, des requêtes multimédias, des pseudo-classes, etc.

En utilisant Radium, vous pouvez gérer directement des variables, des requêtes multimédias, des pseudo-classes, etc., et vous pouvez directement utiliser des mathématiques, des connexions, des expressions régulières, des conditions, des fonctions, etc.

Pour un usage spécifique, veuillez consulter le site officiel du radium

Remarque : Avant de l'exporter, il doit être enveloppé de Radium.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo CSS du site Web PHP chinois !