Hướng dẫn dùng react-jss JavaScript

Thời gian đọc: 3 phút

Chào mọi người, ở bài viết này chúng ta sẽ cùng đi tìm hiểu về JSS, đây là một thư viện khá hay để hỗ trợ viết CSS trong JS, chúng ta có thể hiểu sơ sơ nó sẽ giống như Styled Components, Radium, Aphrodite,…

Như mình đã nói bên trên, JSS cho phép chúng ta viết CSS trong JS. Đây là một thư viện bao gồm nhiều package hỗ trợ chúng ta trong quá trình Dev.

Tại sao sử dụng JSS

Chắc hẳn một vài bạn sẽ thắc mắc tại sao phải sử dụng JSS, trong khi chúng ta có thể viết CSS riêng hoặc Inline CSS. Vì vậy mình sẽ nêu ra một số vấn đề dưới đây:

• Khi chúng ta đã quen với việc dùng Styled Components của React, nhưng lại gặp một project khác sử dụng JS thuần. Thì khi đó đây là một sự lựa chọn tốt dành cho bạn.
• Khi gặp trường hợp database trả về thuộc tính CSS. Chẳng hạn như database sẽ trả về link hình ảnh, hoặc giá trị màu,… Khi đó, chúng ta sẽ lấy giá trị này và viết CSS trong JS luôn.

Ưu điểm và nhược điểm của JSS

Ưu điểm khi sử dụng JSS :

• Khi sử dụng JSS chúng ta sẽ tận dụng tối đa khả năng của JS, làm giảm bớt code trong các file CSS.
• Tránh trường hợp Inline CSS.
• Chúng ta sẽ không còn phải quản lý hay bảo trì quá nhiều các style-sheets nữa. JSS sẽ hỗ trợ trích xuất CSS ở cấp độ component, thay cho cấp độ document [phương pháp modularity].
• Giải quyết được vấn đề xung đột class name hoặc các style khi chúng ta làm việc với một project khá lớn.
• Phù hợp với những người đã quen với dạng Styled Components.

Nhược điểm:

• Khá khó khăn với người chưa tiếp xúc với Styled Components hoặc việc JSS tự sinh ra class ngẫu nhiên dẫn đến không quen trong quá trình DEV.

Ví dụ về sử dụng JSS

Muốn sử dụng được JSS đầu tiên chúng ta phải setup nó trong project của mình. Nếu các bạn muốn cấu hình thêm webpack hoặc gulp thì có thể xem bài này nhé!

Cài đặt

Để cài đặt nó đầu tiên chúng ta dùng lệnh:

yarn add jss

Tiếp theo chúng ta sẽ cài đặt preset:

yarn add jss-preset-default

Như vậy là phần cài đặt đã xong.

Ví dụ

Ở đây, mình sẽ làm ví dụ đơn giản về popup thông báo nhé:

 

     

     
     

         

             

                 Chào mừng các bạn đến với //wolfactive.dev . Hãy cùng chúng tôi tìm hiểu về JSS nhé .
             
             

                 Close Popup
             
         

     
 

Còn đây là phần Js :

import jss from 'jss';
import preset from 'jss-preset-default';

jss.setup[preset[]];

var domPopup = document.querySelector[".wa_popup"];
var waContain = document.querySelector[".wa_contain"];
var waPopupContain = document.querySelector[".wa_popup_contain"];
var btn = document.querySelector[".btn"];
// Khởi tạo CSS của bạn.
const style = {
  waPopup: {
    position: 'fixed',
    width: '100%',
    height: '100%',
    background: 'rgb[46,162,204]',
    background: `linear-gradient[270deg, rgba[46,162,204,0.2665441176470589] 0%, rgba[46,162,204,0.6530987394957983] 35%, rgba[46,162,204,1] 100%]`,
  },
  waContain:{
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  waPopupContain:{
    maxWidth: '500px',
    padding: '20px',
    background: '#fff',
    fontSize: '20px',
    textAlign: 'center',
    boxShadow: [
        [1, 1, 13, 3, '#ffffffc7']
      ],
    color: '#187698',
  },
  myBtn:{
    border: 'none',
    background: '#3faad0',
    padding: [12, 20],
    color: '#fff',
    fontWeight: '600',
    outline: '0',
    cursor: 'pointer',
    marginTop:'20px',
    textTransform: 'uppercase',
  },
  '@media [max-width: 438px]': {
    waPopupContain: {
      width: '90%',
    }
  }
};

// Compile styles, ứng dụng plugins.
const sheet = jss.createStyleSheet[style];

// Nếu bạn muốn hiển thị trên client, hãy chèn nó vào DOM.
sheet.attach[];

const { classes } = jss.createStyleSheet[style].attach[];
// Add style vào DOM
domPopup.classList.add[classes.waPopup];
waContain.classList.add[classes.waContain];
waPopupContain.classList.add[classes.waPopupContain];
btn.classList.add[classes.myBtn];

// Nếu bạn muốn hiển thị phía máy chủ, hãy lấy văn bản CSS.
sheet.toString[];

Tổng kết

Như vậy là ở bài viết này chúng ta đã tìm hiểu về JSS và cách sử dụng nó. Hẹn gặp lại các bạn ở bài tiếp theo .
Các bạn có thể xem Document của JSS tại đây
Cảm ơn các bạn đã đón đọc. Các bạn có thắc mắc hay có vấn đề cần giải đáp thì hay inbox vào fanpage Wolfactive nhé.