Rate this post

CSS trong React được sử dụng để tạo kiểu cho Ứng dụng hoặc component React. Thuộc tính style là thuộc tính được sử dụng nhiều nhất để tạo kiểu trong các ứng dụng React, thuộc tính này bổ sung các kiểu được tính toán động tại thời điểm kết xuất. Nó chấp nhận một đối tượng JavaScript trong thuộc tính camelCase hơn là một chuỗi CSS. Có nhiều cách có sẵn để thêm kiểu vào Ứng dụng hoặc component React của bạn bằng CSS. Ở đây, chúng ta sẽ thảo luận chủ yếu về bốn cách để tạo kiểu cho các component React, được đưa ra dưới đây:

inline Styling
CSS Stylesheet
CSS Module
Styled Components

Tóm tắt nội dung

Cơ bản về CSS trong React

Trong phần này, chúng ta sẽ khám phá cách thức CSS được áp dụng trong môi trường React và làm thế nào nó khác biệt so với các cách tiếp cận truyền thống trong việc thiết kế giao diện người dùng.

Cách thức hoạt động của CSS trong môi trường React:

Component-Based Styling: Trong React, mỗi component thường được thiết kế để hoạt động một cách độc lập. Điều này có nghĩa là CSS cũng được áp dụng theo từng component, giúp quản lý và bảo trì dễ dàng hơn.
Inline Styling và JSX: React cho phép các nhà phát triển sử dụng inline styles trực tiếp trong JSX. Điều này tạo ra một cách tiếp cận linh hoạt nhưng cũng đòi hỏi việc quản lý kỹ lưỡng để tránh rối loạn mã.
Dynamic Styling: React cung cấp khả năng thay đổi style một cách động dựa trên trạng thái của component, điều này tạo nên sự tương tác người dùng phong phú và linh hoạt.

So sánh với cách tiếp cận truyền thống:

CSS Global vs Local: Trong các phương pháp truyền thống, CSS thường được viết dưới dạng tờ style toàn cục, ảnh hưởng đến toàn bộ trang web. Trong khi đó, React hỗ trợ cách tiếp cận module hoặc component-specific, giúp hạn chế sự xung đột và tăng cường tính mô đun.
Quản lý Trạng thái: Trong các website truyền thống, việc thay đổi trạng thái thường yêu cầu JavaScript để điều chỉnh styles. Trong React, sự kết hợp giữa JavaScript và JSX cho phép việc này trở nên mượt mà và trực quan hơn.
Tái sử dụng và Bảo trì: Các phương pháp truyền thống có thể gặp khó khăn trong việc tái sử dụng styles và bảo trì. React, với cách tiếp cận dựa trên component, giúp tái sử dụng và bảo trì trở nên dễ dàng và hiệu quả hơn.

Kết luận, việc áp dụng CSS trong React mang lại một cách tiếp cận mới mẻ và hiệu quả, đặc biệt phù hợp với cấu trúc ứng dụng dựa trên component. Nó không chỉ cải thiện khả năng quản lý và bảo trì mà còn tăng cường khả năng tùy biến và tương tác với người dùng.

Inline Styling

Inline styling trong React là một phương pháp định kiểu nhanh chóng và linh hoạt, cho phép bạn áp dụng trực tiếp styles vào các elements bằng cách sử dụng JavaScript. Điều này đặc biệt hữu ích khi muốn thực hiện các thay đổi style dựa trên trạng thái hoặc props của component.

Cách thức hoạt động:

Khi sử dụng inline styling, bạn sẽ định nghĩa styles dưới dạng đối tượng JavaScript, với các tên thuộc tính theo quy tắc camelCase.
Điều này khác biệt với cách định nghĩa thông thường trong CSS, nơi tên thuộc tính được viết theo kiểu hyphenated (ví dụ: background-color).

Ví dụ Mở Rộng:

Sử dụng Inline Styling Trực Tiếp:

Trong ví dụ sau, bạn sẽ thấy việc áp dụng inline styling trực tiếp vào element <h1> với màu chữ là xanh lá và element <p> với màu nền màu xanh nhạt:

import React from 'react';  
import ReactDOM from 'react-dom';  

class App extends React.Component {  
  render() {  
    return (  
      <div>  
        <h1 style={{color: "Green"}}>Hello React CSS!</h1>  
        <p style={{backgroundColor: "lightgreen"}}>Here, you can find all CS tutorials.</p>  
      </div>  
    );  
  }  
}  
export default App;

Tạo Đối Tượng Style:

Phương pháp này giúp bạn quản lý styles một cách tập trung hơn và dễ dàng thực hiện các thay đổi trên nhiều elements.
Trong ví dụ dưới đây, mystyle là một đối tượng chứa nhiều thông tin style, được áp dụng vào element <h1>:

import React from 'react';  
import ReactDOM from 'react-dom';  

class App extends React.Component {  
  render() {  
    const mystyle = {  
      color: "Green",  
      backgroundColor: "lightBlue",  
      padding: "10px",  
      fontFamily: "Arial"  
    };  
    return (  
      <div>  
        <h1 style={mystyle}>Hello CSS React</h1>  
        <p>Here, you can find all CS tutorials.</p>  
      </div>  
    );  
  }  
}  
export default App;

Lưu ý về Hiệu Suất và Tái Sử Dụng:

Mặc dù inline styling mang lại sự tiện lợi và linh hoạt, nhưng nó có thể làm giảm hiệu suất khi sử dụng trong các ứng dụng lớn do sự trùng lặp của code.
Nó cũng làm giảm khả năng tái sử dụng của styles giữa các components. Để giải quyết điều này, bạn có thể xem xét sử dụng các phương pháp như CSS Modules hoặc Styled Components.

Kết luận, inline styling là một công cụ mạnh mẽ trong React, nhưng cần được sử dụng một cách cân nhắc để đảm bảo hiệu suất và bảo trì tốt cho ứng dụng của bạn.

CSS Stylesheet

Sử dụng CSS Stylesheets là một cách truyền thống nhưng vẫn rất hiệu quả để áp dụng styles cho ứng dụng React. Phương pháp này đặc biệt hữu ích khi bạn muốn duy trì các style trên toàn bộ ứng dụng hoặc khi styles không thay đổi dựa trên trạng thái hoặc props của component.

Cách thức hoạt động:

Tạo CSS File: Bạn tạo một file CSS riêng biệt (ví dụ: App.css), nơi bạn định nghĩa tất cả các styles cho ứng dụng của mình.
Import vào React Component: Sử dụng lệnh import để thêm file CSS vào file JavaScript hoặc JSX của bạn. Điều này đảm bảo rằng tất cả styles trong file CSS sẽ được áp dụng mỗi khi component được render.

Ví dụ Mở Rộng:

Định Nghĩa Styles trong CSS File:

Trong App.css, bạn có thể định nghĩa styles cho toàn bộ ứng dụng hoặc cho các component cụ thể:

/* App.css */
body {
  background-color: #008080;
  color: yellow;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Áp Dụng Styles qua React Component:

Trong App.js, bạn chỉ cần import file CSS và sử dụng nó:

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello React CSS</h1>
        <p>Here, you can find all CS tutorials.</p>
      </div>
    );
  }
}
export default App;

Lợi ích:

Tách Biệt Giữa Logic và Presentation: Sử dụng CSS Stylesheets giúp tách biệt rõ ràng giữa logic của ứng dụng (JavaScript) và phần trình bày (CSS), làm cho code dễ hiểu và dễ bảo trì hơn.
Dễ Dàng Quản Lý và Tái Sử Dụng: Styles được quản lý tập trung trong một hoặc vài file CSS, giúp quản lý và tái sử dụng styles trở nên dễ dàng.
Tối Ưu Hóa Hiệu Suất: Tách styles ra khỏi JavaScript có thể giúp giảm kích thước file JS và cải thiện hiệu suất tải trang.

Lưu ý về Quy Ước Đặt Tên và Tổ Chức Code:

Để tránh xung đột CSS và tăng cường khả năng bảo trì, bạn nên áp dụng các quy tắc đặt tên nhất quán như BEM (Block, Element, Modifier) hoặc sử dụng CSS Modules.
Cân nhắc việc phân chia styles vào các file CSS khác nhau dựa trên chức năng hoặc component để quản lý dễ dàng hơn.

Kết luận, việc sử dụng CSS Stylesheets trong React là một cách tiếp cận hiệu quả, mang lại sự tách biệt và sự rõ ràng trong quản lý styles, đồng thời giúp tối ưu hóa hiệu suất của ứng dụng.

CSS Module

CSS Modules là một kỹ thuật phổ biến và hiện đại trong việc quản lý styles trong các ứng dụng React. Nó cho phép các nhà phát triển định nghĩa styles trong các file CSS riêng biệt, nhưng đảm bảo rằng những styles này được xác định phạm vi cục bộ cho từng component, tránh xung đột giữa các tên lớp và tên hoạt ảnh.

Cách thức hoạt động:

Khi sử dụng CSS Modules, bạn tạo một file với phần mở rộng .module.css. Trong file này, bạn viết CSS như bình thường nhưng các tên lớp và tên hoạt ảnh được tự động “hashed” (biến đổi) để đảm bảo tính duy nhất.
Trong file JavaScript hoặc JSX, bạn nhập (import) module CSS này và gán các tên lớp đã được xác định phạm vi cục bộ cho các elements.

Ví dụ Mở Rộng:

Định Nghĩa Styles trong CSS Module:

Trong myStyles.module.css, bạn định nghĩa các styles cụ thể cho component:

/* myStyles.module.css */
.mystyle {
  background-color: #cdc0b0;
  color: Red;
  padding: 10px;
  font-family: Arial;
  text-align: center;
}

.parastyle {
  color: Green;
  font-family: Arial;
  font-size: 35px;
  text-align: center;
}

Áp Dụng Styles qua React Component:

Trong App.js, bạn nhập module CSS và sử dụng các styles được định nghĩa:

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './myStyles.module.css';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1 className={styles.mystyle}>Hello React CSS</h1>
        <p className={styles.parastyle}>It provides great CS tutorials.</p>
      </div>
    );
  }
}
export default App;

Lợi ích:

Tính Duy Nhất và Không Xung Đột: Với CSS Modules, bạn không cần lo lắng về xung đột tên lớp, giúp code dễ quản lý và bảo trì hơn.
Tính Mô Đun và Tái Sử Dụng: Phương pháp này hỗ trợ việc xây dựng các component mô đun, có thể tái sử dụng trong toàn bộ ứng dụng.
Tối Ưu Hóa Tải Trang: Chỉ những styles cần thiết cho mỗi component mới được tải, giúp tối ưu hóa hiệu suất tải trang.

Lưu ý Khi Sử Dụng:

Để tận dụng tối đa lợi ích của CSS Modules, bạn nên duy trì một cấu trúc rõ ràng và quy ước đặt tên thống nhất.
Cân nhắc việc kết hợp CSS Modules với các phương pháp khác như Preprocessors (ví dụ: Sass) để tăng cường khả năng quản lý và tối ưu hóa styles.

Kết luận, CSS Modules cung cấp một cách tiếp cận hiện đại và hiệu quả trong việc quản lý styles ở mức độ component, giúp tạo ra các ứng dụng React linh hoạt, dễ bảo trì và hiệu suất cao.

Styled Components

Styled-components là một thư viện phổ biến trong cộng đồng React, cung cấp một cách tiếp cận linh hoạt và mạnh mẽ để tạo kiểu cho các component. Nó kết hợp CSS và JavaScript, cho phép bạn viết mã CSS trực tiếp trong file JavaScript hoặc TypeScript, tạo ra các component với styles được định nghĩa trước.

Cách thức hoạt động và Tính năng:

Automatic Critical CSS: Styled-components tự động chèn các styles cần thiết vào trong head của trang, giúp tối ưu hóa việc tải trang và hiệu suất.
No Class Name Bugs: Sử dụng styled-components giúp tránh được các lỗi liên quan đến xung đột tên lớp, nhờ vào việc tự động tạo ra tên lớp duy nhất cho mỗi component.
Easier Deletion of CSS: Khi một component bị xoá, tất cả styles liên quan cũng sẽ được loại bỏ, giảm bớt rủi ro của mã CSS không sử dụng.
Simple Dynamic Styling: Styled-components hỗ trợ việc tạo styles động dễ dàng, cho phép bạn thay đổi styles dựa trên props hoặc trạng thái của component.
Painless Maintenance: Việc bảo trì và quản lý styles trở nên dễ dàng hơn khi mỗi component đi kèm với styles riêng của nó.

Ví dụ Mở Rộng:

Tạo Styled Component:

Bạn có thể tạo một styled component bằng cách sử dụng thư viện styled-components:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  margin: 10px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

Sử dụng trong React Component:

StyledButton giờ có thể được sử dụng như một component thông thường trong React:

import React from 'react';
import ReactDOM from 'react-dom';
import { StyledButton } from './StyledButton';

class App extends React.Component {
  render() {
    return (
      <div>
        <StyledButton>Click me</StyledButton>
      </div>
    );
  }
}
export default App;

Lợi ích khi áp dụng:

Tích hợp CSS trong JS: Cho phép viết CSS ngay trong file JavaScript, giúp quản lý styles và logic cùng một nơi.
Thiết kế Phản Ứng: Styles có thể thay đổi dựa trên props, tạo nên sự tương tác và trải nghiệm người dùng phong phú.
Tối Ưu Hóa Hiệu Suất và Bảo Mật: Styled-components tối ưu hóa việc tải styles cần thiết, giúp cải thiện hiệu suất và đồng thời ngăn chặn các vấn đề bảo mật tiềm tàng liên quan đến inline styles.

Kết luận, styled-components cung cấp một phương pháp hiện đại và linh hoạt trong việc tạo kiểu cho các component React, mang lại sự tối ưu hóa về hiệu suất, dễ dàng trong bảo trì, và khả năng tùy biến cao.

Cách cài đặt

Styled component được tạo kiểu dùng một lệnh duy nhất để cài đặt trong ứng dụng React của bạn. đó là:

$ npm install styled-components --save

Ví dụ

Ở đây, chúng tôi tạo một biến bằng cách chọn một phần tử HTML cụ thể như <div>, <Title> và <paragraph> nơi chúng tôi lưu trữ các thuộc tính kiểu của mình. Bây giờ chúng ta có thể sử dụng tên biến của chúng ta như một loại component React <Div> </Div> của trình bao bọc.

App.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import styled from 'styled-components';  
  
class App extends React.Component {  
  render() {  
    const Div:any = styled.div`  
            margin: 20px;  
            border: 5px dashed green;  
            &:hover {  
            background-color: ${(props:any) => props.hoverColor};  
            }  
            `;  
    const Title = styled.h1`  
            font-family: Arial;  
            font-size: 35px;  
            text-align: center;  
            color: palevioletred;  
            `;  
    const Paragraph = styled.p`  
            font-size: 25px;  
            text-align: center;  
            background-Color: lightgreen;  
            `;  
    return (  
       <div>            
            <Title>Styled Components Example</Title>  
            <p></p>  
            <Div hoverColor="Orange">  
                 <Paragraph>Hello React CSS!!</Paragraph>  
            </Div>  
        </div>  
    );  
  }  
}  
export default App;

Bây giờ, hãy thực thi tập tin App.js.

ReactJS

CSS trong React

Cơ bản về CSS trong React

Inline Styling

CSS Stylesheet

CSS Module

Styled Components

Để lại một bình luận Hủy