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 backgroundColor
in 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>
</>
);
}
Word gesertifiseer!
$95 INSKRIF
CSS-stylblad
Jy kan jou CSS-stilering in 'n aparte lêer skryf, stoor net die lêer met die
.css
lê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'));