Stileer reageer met behulp van CSS


Daar is baie maniere om Reageer met CSS te styl, hierdie tutoriaal sal drie algemene maniere van nader bekyk:

  • Inlyn stilering
  • CSS-stylblaaie
  • CSS-modules

Inlyn stilering

Om 'n element met die inlynstyl-kenmerk te styl, moet die waarde 'n JavaScript-objek wees:

Voorbeeld:

Voeg 'n voorwerp in met die stileringsinligting:

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

Let wel: In JSX word JavaScript-uitdrukkings binne krulhakies geskryf, en aangesien JavaScript-voorwerpe ook krulhakies gebruik, word die stilering in die voorbeeld hierbo binne twee stelle krulhakies geskryf {{}}.


camelCased Eiendom Name

Aangesien die inlyn CSS in 'n JavaScript-objek geskryf is, moet eienskappe met koppeltekenskeiers, soos background-color, geskryf word met kameelkassintaksis:

Voorbeeld:

Gebruik backgroundColorin plaas van background-color:

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}


JavaScript-objek

Jy kan ook 'n voorwerp met stileringsinligting skep en daarna verwys in die stylkenmerk:

Voorbeeld:

Skep 'n stylvoorwerp met die naam myStyle:

const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}


w3schools CERTIFIED . 2022

Word gesertifiseer!

Voltooi die React-modules, doen die oefeninge, neem die eksamen en word w3schools-gesertifiseer!!

$95 INSKRIF

CSS-stylblad

Jy kan jou CSS-stilering in 'n aparte lêer skryf, stoor net die lêer met die .csslêeruitbreiding en voer dit in jou toepassing in.

App.css:

Skep 'n nuwe lêer genaamd "App.css" en voeg 'n CSS-kode daarin in:

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Let wel: Jy kan die lêer noem wat jy wil, onthou net die korrekte lêeruitbreiding.

Voer die stylblad in jou toepassing in:

indeks.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));


CSS-modules

Nog 'n manier om style by jou toepassing te voeg, is om CSS-modules te gebruik.

CSS-modules is gerieflik vir komponente wat in aparte lêers geplaas word.

Die CSS binne 'n module is slegs beskikbaar vir die komponent wat dit ingevoer het, en jy hoef nie bekommerd te wees oor naamkonflikte nie.

Skep die CSS-module met die .module.css uitbreiding, byvoorbeeld: my-style.module.css.

Skep 'n nuwe lêer genaamd "my-style.module.css" en voeg 'n paar CSS-kode daarin in:

my-style.module.css:

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Voer die stylblad in jou komponent in:

Car.js:

import styles from './my-style.module.css'; 

const Car = () => {
  return <h1 className={styles.bigblue}>Hello Car!</h1>;
}

export default Car;

Voer die komponent in jou toepassing in:

indeks.js:

import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));


Toets jouself met oefeninge

Oefening:

Voeg die volgende CSS-style inlyn by die <h1> element

kleur = "pers"

const Header = () => {
  return (
    <>
      <h1 style=>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}