Einführung in sieben Methoden zur Verwendung von CSS in React (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in sieben Methoden zur Verwendung von CSS in React (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Der erste: Stil direkt in der Komponente verwenden

Die Komponente muss keine CSS-Dateien von außen importieren, schreiben Sie sie direkt in die Komponente.

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>Hinweise:<br>1. In normalem CSS, wie Hintergrundfarbe, Boxgröße und anderen Attributen, müssen die Attribute im Stilobjekt p1 in Camel Case, BackgroundColor, BoxSizing konvertiert werden. Eigenschaften ohne Bindestriche wie Rand, Breite usw. bleiben im Stilobjekt unverändert. <br>2. In normalem CSS muss der Wert von CSS nicht in doppelte Anführungszeichen gesetzt werden, z. B. </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. Sie können Zeichenfolgen nicht direkt zum Schreiben von Stilen verwenden wird gemeldet

<div>
<p><img src="https://img.php.cn/upload/image/171/466/819/1553917250154517.png" title="1553917250154517.png" alt="Einführung in sieben Methoden zur Verwendung von CSS in React (mit Code)"></p>
<p>Bei Verwendung des Stilobjekts in React. Werte müssen in doppelte Anführungszeichen gesetzt werden. </p>
<p>Diese Methode des Reaktionsstils gilt nur für die aktuelle Komponente. </p>
<p style="white-space: normal;">Zweitens: Fügen Sie die Datei [name].css in die Komponente ein </p>
<p>Sie müssen import am Anfang der aktuellen Komponente verwenden, um die CSS-Datei einzuführen. </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;

Die auf diese Weise eingeführten CSS-Stile gelten für die aktuelle Komponente und alle ihre Nachkommenkomponenten.

Dritte Methode: 3. Fügen Sie die Datei [name].scss in die Komponente ein

React unterstützt bereits Dateien mit dem Suffix scss, Sie müssen also nur Node installieren -sass reicht aus, da mit Node-Sass SCSS-Dateien in der Node-Umgebung zu CSS-Dateien kompiliert werden können.

>yarn add node-sass

Dann schreiben Sie die SCSS-Datei

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

Einzelheiten zur Verwendung von Sass finden Sie auf der offiziellen Sass-Website

Der auf diese Weise eingeführte CSS-Stil wirkt sich auch auf Die aktuelle Komponente und alle ihre Nachkommenkomponenten .

Vierte Methode: Fügen Sie die Datei [name].module.css in die Komponente ein.

Fügen Sie die CSS-Datei als Modul ein. Wirkt nur auf die aktuelle Komponente. Wirkt sich nicht auf untergeordnete Komponenten der aktuellen Komponente aus.

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;

Diese Methode kann als aktualisierte Version der ersten Methode zur Verwendung von Stilen in Komponenten angesehen werden. Trennen Sie CSS und Komponenten vollständig, ohne andere Komponenten zu beeinträchtigen.

Der fünfte Weg: Einführung der Datei [name].module.scss in der Komponente

ähnelt dem vierten Weg, der Unterschied besteht darin, dass der vierte Weg einführt das CSS-Modul, und hier wird lediglich das SCSS-Modul vorgestellt.

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;

Die gleiche Methode kann als aktualisierte Version der ersten Methode zur Verwendung von Stilen in Komponenten angesehen werden.

Sechste Methode: Um gestaltete Komponenten zu verwenden

müssen Sie zuerst

>yarn add styled-components

installieren und dann eine js-Datei erstellen (beachten Sie, dass es sich um eine js-Datei, keine CSS-Datei)

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

Styled-Components-Stil in der Komponente verwenden

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;

Diese Methode besteht darin, den gesamten CSS-Stil und den HTML-Knoten in einer Komponente zusammenzuführen. Die Einführung dieser Komponente umfasst sowohl HTML als auch CSS.

Der Vorteil besteht darin, dass Sie den Stil jederzeit dynamisch ändern können, indem Sie Attribute an die Komponente übergeben. Es ist bequemer für die Verarbeitung von Variablen, Medienabfragen, Pseudoklassen usw.

Diese CSS-Methode ist nur für die aktuelle Komponente gültig.

Informationen zur spezifischen Verwendung finden Sie auf der offiziellen Website von styled-components.

Siebte Methode: Um Radius zu verwenden

müssen Sie

>yarn add radium

installieren zuerst und dann

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

direkt in Reaktionskomponenten einzuführen und zu verwenden, ist für die Handhabung von Variablen, Medienabfragen, Pseudoklassen usw. unpraktisch.

Mit Radium können Sie Variablen, Medienabfragen, Pseudoklassen usw. direkt verarbeiten und Mathematik, Verbindungen, reguläre Ausdrücke, Bedingungen, Funktionen usw. direkt in js verwenden.

Informationen zur spezifischen Verwendung finden Sie auf der offiziellen Website von Radium

Hinweis:

Vor dem Export muss es mit Radium umwickelt werden.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte

CSS-Video-Tutorial auf der chinesischen PHP-Website!