Hướng dẫn tạo kiểu ứng dụng React.js bằng Emotion

Thư viện Emotion đơn giản hóa cách dùng CSS trong React và thêm một số tính năng cú pháp tiện ích. Dưới đây là cách tạo kiểu ứng dụng React.js bằng Emotion.

{index}

Emotion là gì?

Emotion là thư việ tạo kiệu ứng dụng React, cung cấp cách đơn giản và hiệu quả để quản lý các style của bạn. Nó cho phép bạn viết CSS trong JavaScript và cung cấp một API linh hoạt để tạo kiểu các thành phần.

Một trong số những lợi ích chính của việc dùng Emotion để tạo kiểu ứng dụng React là cung cấp một cách hiệu quả hơn để quản lý các style của bạn. Thư viện Emotion chỉ áp dụng kiểu cho các thành phần dùng chúng thay vì toàn bộ trang. Điều này có thể giúp bạn tránh xung động với những style khác trên trang và làm code có thể tái sử dụng và mô đun hơn.

Cách cài đặt Emotion

Để thêm thư viện Emotion cho ứng dụng React, chạy lệnh terminal sau:

npm install --save @emotion/react

Thư viện Emotion giờ sẽ được cài đặt trong dự án của bạn và sẵn sàng dùng để tạo kiểu app React.

Tạo kiểu thuộc tính css của Emotion

Khi đã cài thư viện Emotion, bạn có thể dùng thuộc tính css để tạo kiểu cho app React. Thuộc tính css tương tự cho thuộc tính kiểu mà bạn có thể chuyển style sang nó dưới dạng chuỗi hoặc các đối tượng JavaScript thông thường.

Để tạo kiểu ứng dụng bằng thuộc tính css, bạn phải nhập nó từ thư viện @emotion/react, sau đó xác định các kiểu:

/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';

function App() {
  return (
    <button css={css`
      padding: 0.5rem 1rem;
      border: none;
      font-family: cursive;
      border-radius: 12px;
      color: #333333;
      background-color: inherit;
      margin-block-start: 2rem;
      margin-block-end: 2rem;
    `}>
      Click Me
    </button>
  )
}

export default App;

Dòng code đầu tiên /** @jsxImportSource @emotion/react */ là một bình luận cụ thể mà bạn nên thêm vào file JSX để cho thư viện Emotion biết bạn nên dùng nó dưới dạng pragma JSX cho file đó.

Thành phần button hiện một nút bấm với một số kiểu tùy biến. Tại đây, thuộc tính css thêm kiểu tùy chỉnh có nhân tố button.

Thuộc tính CSS cũng hỗ trợ kiểu được lồng, cho phép bạn viết style được lồng trong thuộc tính khác. Ví dụ:

/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';

function App() {
  return (
    <button css={css`
      padding: 0.5rem 1rem;
      border: none;
      font-family: cursive;
      border-radius: 12px;
      color: #333333;
      background-color: inherit;
      margin-block-start: 2rem;
      margin-block-end: 2rem;

      &:hover{
        color: #e2e2e2;
        background-color: #333333;
      }
    `}>
      Click Me
    </button>
  )
}

export default App;

Chuyển đối tượng sang thuộc tính CSS

Thuộc tính CSS cũng chấp nhận các kiểu JavaScript thông thường. Khi tạo kiểu một số thành phần, dùng style đối tượng cho phép bạn tái sử dụng kiểu trong thành phần.

Để chuyển kiểu đối tượng vào thuộc tính css, xác định style dưới dạng đối tượng JavaScript và chuyển nó sang thuộc tính.

const style = {
    padding: '0.5rem 1rem',
    border: 'none',
    fontFamily: 'cursive',
    borderRadius: '12px',
    color: '#333333',
    backgroundColor: 'inherit',
    marginBlockStart: '2rem',
    marginBlockEnd: '2rem',

    '&:hover': {
      color: '#e2e2e2',
      backgroundColor: '#333333',
    }
}

return (
  <div className="app">
   <button css={ style }>Click Me</button>
  </div>
);

Lưu ý rằng tên thuộc tính CSS là camelCased thay vì hyphenated. Đó là do style được xác định dưới dạng đối tượng JavaScript, dùng quy ước đặt tên camelCase.