Styling Reageren met CSS
Er zijn veel manieren om React met CSS te stylen, deze tutorial zal drie veelvoorkomende manieren nader bekijken:
- Inline-styling
- CSS-stylesheets
- CSS-modules
Inline-styling
Als u een element wilt opmaken met het inline-stijlkenmerk, moet de waarde een JavaScript-object zijn:
Voorbeeld:
Voeg een object in met de stijlinformatie:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Opmerking: in JSX worden JavaScript-expressies tussen accolades geschreven en aangezien JavaScript-objecten ook accolades gebruiken, wordt de stijl in het bovenstaande voorbeeld tussen twee sets accolades geschreven {{}}.
camelCased-eigenschapsnamen
Aangezien de inline CSS is geschreven in een JavaScript-object, moeten eigenschappen met koppeltekenscheidingstekens, zoals background-color, worden geschreven met camel case-syntaxis:
Voorbeeld:
Gebruik backgroundColorin plaats van
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript-object
U kunt ook een object maken met stijlinformatie en ernaar verwijzen in het stijlkenmerk:
Voorbeeld:
Maak een stijlobject met de 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>
</>
);
}
Gecertificeerd!
$95 INSCHRIJVEN
CSS-stijlblad
U kunt uw CSS-styling in een apart bestand schrijven, het bestand met de
.cssbestandsextensie opslaan en in uw toepassing importeren.
App.css:
Maak een nieuw bestand met de naam "App.css" en voeg hierin wat CSS-code in:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Opmerking: u kunt het bestand noemen wat u maar wilt, onthoud alleen de juiste bestandsextensie.
Importeer de stylesheet in uw applicatie:
index.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
Een andere manier om stijlen aan uw toepassing toe te voegen, is door CSS-modules te gebruiken.
CSS-modules zijn handig voor componenten die in afzonderlijke bestanden zijn geplaatst.
De CSS in een module is alleen beschikbaar voor de component die deze heeft geïmporteerd, en u hoeft zich geen zorgen te maken over naamconflicten.
Maak de CSS-module met de .module.css
extensie, bijvoorbeeld: my-style.module.css.
Maak een nieuw bestand met de naam "my-style.module.css" en voeg wat CSS-code in:
mijn-stijl.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Importeer de stylesheet in uw component:
auto.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Importeer het onderdeel in uw applicatie:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));