Comment écrire du style en réaction

Comment écrire un style dans React : 1. Utilisez le style en ligne ; 2. Utilisez la méthode className ; 3. Utilisez les noms de classe pour modifier dynamiquement le style ; 4. Utilisez le plug-in [styled-components] pour écrire le style d'étiquette.

L'environnement d'exploitation de ce tutoriel : système windows7, version React17 Cette méthode convient à toutes les marques d'ordinateurs.

Comment écrire le style dans React :

1. Inline

import React, { Fragment } from "react";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
      const txtColor = {
          color: '#F00'
      }
    return (
     <Fragment>
         <h1 style={txtColor}></h1>
     </Fragment>
    );
  }
}
export default Style;

Cette méthode d'écriture n'est pas recommandée, style Si il y en a trop, le code sera compliqué !

2. Utilisez className

import React, { Fragment } from "react";
import "./../../style.css";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
     <Fragment>
         <h1 className="textColor"></h1>
     </Fragment>
    );
  }
}
export default Style;

pour créer un nouveau fichier .css, importez le fichier et utilisez , vous pouvez utiliser le style avec la classe 'textColor' dans le fichier .css importé. Cette méthode est suffisante pour les projets généraux className=“textColor”

3.

import React, { Fragment } from "react";
import classNames from 'classnames'
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
     <Fragment>
         <h1 className={classNames(&#39;textColor&#39;, {&#39;textContent&#39;: false} ,{&#39;textTitle&#39;: true})}></h1>
     </Fragment>
    );
  }
}
export default Style;

Cette façon de modifier dynamiquement le style nécessite l'installation des noms de classes du plug-in. Dans le code ci-dessus, les classes de la balise h1 incluent textColor et textTitle.

4. Utilisez le plug-in styled-components pour écrire des styles de balises

import React, { Fragment } from 'react'
import styled from 'styled-components'
const Title = styled.h1`
  color: #f00;
`
class Style extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <Fragment>
        <Title>复习style</Title>
      </Fragment>
    )
  }
}
export default Style

Utilisez

pour écrire des styles pour les balises. Vous devez d'abord installer le plug-in. . Le code ci-dessus consiste à définir un titre, à définir le style de la balise h1 via styled, puis le titre utilisé dans le composant est équivalent à la balise h1 avec un style écrit. Cette méthode est plus courante dans les grands projets.

styled-components

Recommandations d'apprentissage gratuites associées :

javascript(vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!