19. CSS trong React JS

Sử dụng CSS trong React JS có thể được thực hiện theo nhiều cách khác nhau. Dưới đây là một số cách phổ biến để áp dụng CSS vào ứng dụng React:

1. Inline CSS: Bạn có thể sử dụng inline CSS bằng cách truyền các thuộc tính style vào các phần tử JSX. Tuy nhiên, phương pháp này thường không được khuyến khích vì nó có thể gây rối và khó bảo trì.

jsx

const MyComponent = () => {
  const myStyles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  };

  return <div style={myStyles}>Hello World</div>;
};

2. CSS Modules: CSS Modules là một cách tốt để tạo tên lớp CSS duy nhất và không gây xung đột giữa các thành phần khác nhau trong ứng dụng React.Bước 1: Tạo một tệp CSS và sử dụng tên lớp duy nhất.css

/* styles.module.css */
.myComponent {
  background-color: blue;
  color: white;
  padding: 10px;
}

Bước 2: Trong thành phần React, import và sử dụng CSS module.

jsx

2. import React from 'react'; import styles from './styles.module.css'; const MyComponent = () => { return <div className={styles.myComponent}>Hello World</div>; }; export default MyComponent;
3. CSS Frameworks: Bạn có thể sử dụng các framework CSS như Bootstrap, Material-UI, Ant Design để tạo giao diện ứng dụng một cách nhanh chóng bằng cách sử dụng các thành phần có sẵn và áp dụng lớp CSS.
4. Global CSS: Bạn cũng có thể sử dụng CSS toàn cục bằng cách thêm các tệp CSS vào dự án của bạn và import chúng trong tệp gốc hoặc các thành phần chính.

jsx

import React from 'react';
import './global-styles.css';

const App = () => {
  return <div className="app-container">Hello World</div>;
};

export default App;

5. CSS-in-JS Libraries: Có nhiều thư viện CSS-in-JS như Emotion, Styled Components, và CSS Modules for React (khác với CSS Modules thông thường) cho phép bạn viết CSS bằng cú pháp JavaScript hoặc JSX, giúp tạo ra các thành phần tương tự như CSS modules.Ví dụ sử dụng Styled Components:

jsx

import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: blue;
  color: white;
  padding: 10px;
`;

const MyComponent = () => {
  return <StyledDiv>Hello World</StyledDiv>;
};

export default MyComponent;

Lựa chọn cách sử dụng CSS phụ thuộc vào dự án của bạn và cách bạn muốn quản lý giao diện và phong cách trong ứng dụng React của mình. Trên đây là giới thiệu về cách dùng CSS trong React JS.