Nay mình cùng tìm hiểu các cách khác nhau để style trong React nghen.

I. Inline styles

– Thêm vào thuộc tính style của tag html, và viết các thuộc tính theo dạng camelCase nha. Ví dụ backgroundColor, textAlign…

<h1 style={{ textAlign: 'center', color: 'red' }}></h1>

– Cách này ít dùng, chỉ dùng khi cần thay đổi styles theo props, hoặc giá trị động từ api trả về chẳng hạn

II. Css

– Cách này tạo 1 file css bên ngoài và import vào dùng những class, id… đã định nghĩa sẵn bên file css này là okie rồi

/* styles.css */
.text-center {
  text-align: center;
}

/* component.js */
import './styles.css';

III. Scss & Bem

– Cũng như cách trên  nhưng tạo file scss và có thể viết sass trông gắn gọn, sạch sẽ hơn ahihi

/* styles.scss */
.menu {
  display: flex;
  &-item {
    position: relative;
  }
  &-link {
    color: "blue";
  }
}

/* component.js */
import './styles.scss';

IV. Css Module

– Đối với cách này thì sẽ tạo ra 1 unique class bằng cách thêm các chuỗi vào tên class nên sẽ ko gặp vấn đề về trùng class giữa các dev với nhau

/* styles.module.css */
.title{
  color: red;
}

/* component.js */
import './styles.module.css';
Title is here

V. Styled Component

– Cách này viết css trong js luôn. Nó sẽ tự tạo ra class unique cho mình nên cũng sẽ không gặp vấn đề trùng class cách css module

/* component.js */
const TitleStyles= styled.h1`
  text-align: center;
  color: ${props => props.color || "red"}