Bạn có thể dùng một số kỹ thuật để viết style cho các trang và ứng dụng React của mình như dễ nhất là tải xuống thư viện React Component. Tuy nhiên, ngay cả khi sử dụng thư viện, trong tương lai bạn chắc chắn sẽ cần thêm các kiểu tùy chỉnh. Vậy, đâu mới là cách dùng CSS tốt nhất để viết style?

Đối với các dự án quy mô nhỏ, bạn có thể thoải mái viết style cho ứng dụng của mình bằng cách sử dụng Inline styles, Modules, hoặc bằng cách tự viết thông số kỹ thuật className. Và đối với các dự án động – như ứng dụng – thì tốt hơn là bạn nên sử dụng thư viện cho phép bạn triển khai props một cách dễ dàng.

Ngoài ra, bạn có thể sử dụng bộ công cụ tiện ích như Tailwind UI, đi kèm với các pre-built styles. Nếu bạn cần render một mô hình hoặc bản trình bày, thì bộ giao diện người dùng thân thiện với React là lựa chọn phù hợp.

Viết style với className

Trong React, các kiểu CSS thực tế được áp dụng thông qua thuộc tính className.

Điều này cũng tương đương với việc sử dụng stylesheet cho dự án của bạn. Vì React được điều khiển bởi cấu trúc component, nên bạn chỉ có thể nhập stylesheet của mình cho các nhu cầu cụ thể.

Hãy xem một ví dụ.

App.css

.CSS-span {
  display: inline-block;
  transform: rotate(-1deg);
  position: relative;
  color: #fff;
  background-color: #dd9662;
  padding: 1px 5px 1px 5px;
  border-radius: 5px;
}

App.js

import './app.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
        How to Style React Components with <span className="CSS-span">CSS</span>
        </p>
      </header>
    </div>
  );
}

Và đây là kết quả

6 Cach Viet Style React Component

Đây là một kỹ thuật vanilla hoàn toàn hợp lệ và thường được sử dụng để khai báo các global variables mà bạn sẽ dùng lại trên các core component.

Lưu ý duy nhất là khi dự án của bạn phát triển, khả năng đặt tên xung đột cũng tăng theo.

Tương tự như vậy, chi phí hiệu quả của việc quản lý hàng trăm stylesheet cũng rất cao.

Sử dụng JSX cho Inline Styles

React cho phép bạn viết style các phần tử DOM bằng cách sử dụng các Inline Styles. Mặc dù logic CSS vẫn giữ nguyên, nhưng bản thân style đó phải chuyển sang JavaScript, hay còn được gọi là JSX.

Hãy xem xét một ví dụ:

Headline.js

function Headline(){

 const headlineStyle = {
      backgroundColor: "#fff",
      lineHeight: "1.5",
      height: "2rem",
      border: "none",
      color: "black"
 }

    return (
        <div style= { headlineStyle } >
            <h2>Headline title</h2>
            <p>the sub-headline</p>
        </div>
    )
}

Một điều cần lưu ý là thay vì viết line-height, chúng tôi sử dụng lineHeight.

Lý do là vì JSX gần với JavaScript hơn là HTML, nên React DOM sử dụng quy ước đặt tên thuộc tính camelCase thay vì tên thuộc tính HTML.”.

Các Inline Styles thường được sử dụng để giới thiệu các ví dụ, nhưng cũng để thêm kiểu động cho các elements cụ thể. Ngoài ra, các inline styles không hỗ trợ các pseudo-elements hoặc media queries, vì bạn chỉ có thể chuyển style. Sử dụng stylesheet sẽ là một giải pháp thay thế tốt hơn.

Tạo phạm vi cục bộ với CSS Modules

Nếu bạn muốn áp dụng các styles tùy chỉnh cho các components mà không đặt tên xung đột, có một cách để thực hiện là thông qua CSS Modules.

Đây là một cách tiếp cận mà bạn có thể áp dụng phạm vi cục bộ cho từng component riêng lẻ.

Như vậy:

Header.module.css

.container {
width: 1280px;
margin: 1rem auto;
padding: 1rem;
}
.header {
background-color: #ffffff;
color: #000000;
font-weight: 700;
}

Header.js

import styles from './Header.module.css';

function Header() {
  return (
    <div className={styles.container}>
      <h2 className={styles.header}>Using CSS Modules in React</h2>
    </div>
  );
}

Bạn cũng có thể thực hiện những việc như composition, trong đó bạn gọi một style cụ thể từ một stylesheet khác – tránh phải viết lại cùng một logic hai lần.

.header {
  composes: header from './style.css';
}

CSS in JS

Không giống như các framework như Vue và Svelte, React không cung cấp giao diện kiểu dáng riêng.

Vì vậy, mặc dù bạn có thể viết CSS cho các component bằng các phương pháp đã nói ở trên, nhưng cách tiếp cận “chén thánh” là sử dụng CSS trong các thư viện JS. Mỗi thư viện đều có điểm mạnh và điểm yếu, nhưng nhìn chung, các lợi ích đều giống nhau:

  • Có lợi cho các biến thể style khác nhau
  • Chủ đề có thể truy cập
  • Phạm vi component-based style
  • Các biến CSS động sử dụng các hàm JavaScript

Giải pháp phổ biến nhất cho CSS trong JS là Styled Components.

6 Cach Viet Style React Component 1

Và những sự lựa chọn đáng chú ý khác bao gồm Emotion và Linaria. Vì lợi ích của bản demo, hãy xem cách CSS được tích hợp vào thành phần React bằng thư viện Styled Components.

StyledComponents.js

import styled from 'styled-components';

const HeaderWrapper = styled.section`
  padding: 4em;
  background: orange;
`;

const HeaderTitle = styled.h2`
  font-size: 2rem;
  text-align: center;
  color: black;
`;

<HeaderWrapper>
  <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle>
</HeaderWrapper>

Đầu tiên, bạn tạo một component mới có tên là HeaderWrapper sẽ render container <section> cho header title. Sau đó, bạn tạo một component khác gọi là HeaderTitle và chuyển các biến CSS cho nó. Vì vậy, theo một cách nào đó, điều này hoàn toàn giống như làm việc với Web Components, chỉ trong ngữ cảnh của React.

Sử dụng Khung CSS

Không phải mọi thứ với front-end đều hướng tới các framework và thư viện. Một framework như Tailwind CSS giúp giảm bớt nhu cầu viết tất cả các cấu trúc ứng dụng của bạn từ đầu. Cách thức hoạt động của Tailwind CSS là framework này cung cấp các lớp tiện ích được xác định trước, cho phép bạn cấu trúc một bố cục mà không cần phải viết CSS độc lập.

TailwindCSSApp.js

function Header() {
  return (
    <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10">
      <p className="text-3xl text-black-700 font-bold mb-5">
        Tailwind CSS with React
      </p>
      <p className="text-black-300 text-lg">
        All styling defined with utility classes
      </p>
    </div>
  );
}
export default Header;

Thay vì xác định kiểu thành phần bằng Constants, bạn có thể trực tiếp viết style theo chỉ định framework. Một phương pháp như thế này cực kỳ hiệu quả và chẳng hạn, bạn có thể – nhập các UI components (chẳng hạn như thẻ) do người khác tạo.

Tailwind CSS đặc biệt phổ biến vì bạn có thể sao chép và dán trực tiếp các đoạn mã cũng như sử dụng chúng trong thiết kế ứng dụng của mình mà không gặp bất kỳ hậu quả nào.

Sử dụng thư viện UI 

Phương pháp cuối cùng để tạo style cho các React components là sử dụng thư viện giao diện người dùng. Không giống như một framework, một thư viện UI tuân theo các nguyên tắc về styling. Vì vậy, theo nhiều cách, nó đi kèm với một style đã được xác định trước. Những thứ như Mantine và Material UI có thể là lựa chọn phù hợp.

“Nhược điểm” duy nhất là bạn phải dành khá nhiều thời gian để học thư viện cụ thể đó và có thể áp dụng với các frameworks khác.

Bất chấp rào cản gia nhập, cả CSS frameworks và thư viện giao diện người dùng đều là tiêu chuẩn vàng trong việc tạo style cho các thành phần React.