Bagaimana menambahkan CSS ke dalam sebuah React App ?

Ada beberapa cara yang bisa digunakan:

1. Inline Styling

Copy
1import React from 'react';
2
3const headingStyle = {
4  color: 'blue'
5};
6
7const divStyle = {
8  textAlign: 'center'
9};
10
11export default function App() {
12  return (
13    <div style={divStyle}>
14      <h1 style={headingStyle}>Hello Devsaurus</h1>
15      <p style={{ color: 'red' }}>My Name is brachio</p>
16    </div>
17  );
18}

2. CSS file

style.css

Copy
1.container {
2  text-align: center;
3}
4
5h1 {
6  color: blue;
7}
8
9p {
10  color: red;
11}

App.js

Copy
1import React from 'react';
2import './style.css';
3
4export default function App() {
5  return (
6    <div className="container">
7      <h1>Hello Devsaurus</h1>
8      <p>My Name is brachio</p>
9    </div>
10  );
11}

3. CSS Module

CSS Module adalah sebuah CSS file dimana style-nya secara default bersifat local, tidak seperti CSS file pada umumnya yang bersifat global.

Yang dimaksud bersifat local disini adalah style dapat dibatasi hanya untuk satu component, sehingga tidak terjadi konflik antara style untuk component satu dengan style untuk component yang lain.

Tool create-react-app support CSS Module, untuk contoh kita ambil dari dokumentasi create-react-app.

Button.module.css

Copy
1.error {
2  background-color: red;
3}

another-stylesheet.css

Copy
1.error {
2  color: red;
3}

Button.js

Copy
1import React, { Component } from 'react';
2import styles from './Button.module.css'; // Import css modules stylesheet as styles
3import './another-stylesheet.css'; // Import regular stylesheet
4
5class Button extends Component {
6  render() {
7    // reference as a js object
8    return <button className={styles.error}>Error Button</button>;
9  }
10}

Kita menggunakan style dari CSS module seperti kita mengakses sebuah object.

Copy
1<button className={styles.error}>Error Button</button>

Penjelasan cara kerja CSS module dapat dilihat disini atau disini.

4. Styled Components

Styled Components adalah library yang memungkinkan kita untuk menyisipkan CSS ke dalam React Components ( CSS-in-JS ).

contoh:

Copy
1import React from "react";
2import styled from "styled-components";
3
4const Title = styled.h1`
5  color: blue;
6`
7const Paragraph = styled.p`
8  color: red;
9`
10const Wrapper = styled.div`
11  text-align: center;
12`
13
14export default function App() {
15  return (
16    <Wrapper>
17      <Title>Hello Devsaurus</Title>
18      <Paragraph>My Name is brachio</Paragraph>
19    </Wrapper>
20  );
21}