Tất cả chúng ta đều quen thuộc với cách tiêu chuẩn để liên kết biểu định kiểu với của tài liệu HTML, phải không? . Nhưng nó trông như thế nào để tạo kiểu cho mọi thứ trong một ứng dụng một trang (SPA), chẳng hạn như trong một dự án React?

Hóa ra có một số cách để tạo kiểu cho ứng dụng React. Một số trùng lặp với kiểu dáng truyền thống, một số khác không quá nhiều. Nhưng hãy đếm tất cả những cách chúng ta có thể làm

Nhập biểu định kiểu bên ngoài

Đúng như tên gọi, React có thể nhập các tệp CSS. Quá trình này tương tự như cách chúng tôi liên kết tệp CSS trong HTML

1. Tạo một tệp CSS mới trong thư mục dự án của bạn
2. Viết CSS
3. Nhập nó vào tệp React

Như thế này

import "./style.css";

Điều đó thường nằm ở đầu tệp nơi diễn ra các lần nhập khác

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

Trong ví dụ này, một tệp CSS được nhập vào một

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

0 từ thư mục

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

1

Viết kiểu nội tuyến

Bạn có thể đã quen nghe rằng kiểu dáng nội tuyến không phải là tất cả tuyệt vời cho khả năng bảo trì và không, nhưng chắc chắn có những tình huống (đây là một. ) nơi nó có ý nghĩa. Và khả năng bảo trì không phải là vấn đề trong React, vì CSS thường đã nằm trong cùng một tệp

Đây là một ví dụ cực kỳ đơn giản về kiểu dáng nội tuyến trong React

Tuy nhiên, một cách tiếp cận tốt hơn là sử dụng các đối tượng

1. Đầu tiên, tạo một đối tượng chứa các kiểu cho các phần tử khác nhau
2. Sau đó thêm nó vào một phần tử bằng thuộc tính

   import { React } from "react";
   import "./Components/css/App.css";
   function App() {
     return (
       
   
       
     );
   }
   export default App;

   2 rồi chọn thuộc tính để tạo kiểu

Hãy xem điều đó trong bối cảnh

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    

      
    
  );
}
export default App;

Ví dụ này chứa một đối tượng

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

3 chứa hai đối tượng khác, một cho lớp

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

4 và một cho kiểu nhập văn bản, chứa các quy tắc kiểu tương tự như những gì chúng ta mong muốn thấy trong biểu định kiểu bên ngoài. Những đối tượng đó sau đó được áp dụng cho thuộc tính

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

2 của các phần tử trong phần đánh dấu được trả về

Lưu ý rằng dấu ngoặc nhọn được sử dụng khi tham chiếu các kiểu thay vì dấu ngoặc kép mà chúng tôi thường sử dụng trong HTML thuần túy

Sử dụng mô-đun CSS

Các mô-đun CSS… chuyện quái gì đã xảy ra với chúng vậy, phải không? . Nhưng một lần nữa, chính xác thì chúng là gì?

Trích dẫn tài liệu của repo

Mô-đun CSS hoạt động bằng cách biên dịch các tệp CSS riêng lẻ thành cả CSS và dữ liệu. Đầu ra CSS là CSS chung, bình thường, có thể được đưa trực tiếp vào trình duyệt hoặc nối với nhau và ghi vào một tệp để sử dụng sản xuất. Dữ liệu được sử dụng để ánh xạ các tên mà con người có thể đọc được mà bạn đã sử dụng trong các tệp tới CSS đầu ra an toàn trên toàn cầu

Nói một cách đơn giản hơn, Mô-đun CSS cho phép chúng ta sử dụng cùng một tên lớp trong nhiều tệp mà không có xung đột vì mỗi tên lớp được đặt một tên lập trình duy nhất. Điều này đặc biệt hữu ích trong các ứng dụng lớn hơn. Mỗi tên lớp được đặt trong phạm vi cục bộ cho thành phần cụ thể mà nó đang được nhập

Biểu định kiểu Mô-đun CSS tương tự như biểu định kiểu thông thường, chỉ có phần mở rộng khác (e. g.

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

6). Đây là cách chúng được thiết lập

1. Tạo một tệp có phần mở rộng là

   import { React } from "react";
   import "./Components/css/App.css";
   function App() {
     return (
       
   
       
     );
   }
   export default App;

   7
2. Nhập mô-đun đó vào ứng dụng React (như chúng ta đã thấy trước đó)
3. Thêm một

   import { React } from "react";
   import "./Components/css/App.css";
   function App() {
     return (
       
   
       
     );
   }
   export default App;

   8 vào một phần tử hoặc thành phần và tham chiếu kiểu cụ thể từ các kiểu đã nhập

Ví dụ siêu đơn giản

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    
Hello World
  );
}
export default App;

Sử dụng các thành phần theo kiểu

Bạn đã sử dụng styled-components chưa? . Thành phần được tạo kiểu về cơ bản là thành phần React với — hãy sẵn sàng cho nó — kiểu. Một số tính năng bao gồm tên lớp duy nhất, kiểu động và quản lý CSS tốt hơn vì mỗi thành phần có kiểu riêng

Cài đặt gói npm styled-components trong dòng lệnh

npm install styled-components

Tiếp theo, nhập nó vào ứng dụng React

import styled from 'styled-components'

Tạo một thành phần và gán một thuộc tính được tạo kiểu cho nó. Lưu ý việc sử dụng các mẫu chữ biểu thị bằng backticks trong đối tượng

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

9

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return ;
}
export default App;

Thành phần

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

9 ở trên sẽ được hiển thị dưới dạng div chứa các kiểu đó

kiểu dáng có điều kiện

Một trong những ưu điểm của styled-components là bản thân các thành phần đó có chức năng, như bạn có thể sử dụng các props trong CSS. Điều này mở ra cơ hội cho các câu lệnh có điều kiện và thay đổi kiểu dựa trên trạng thái hoặc giá đỡ

Đây là một bản demo thể hiện điều đó

Ở đây, chúng ta đang điều khiển thuộc tính

1 của div ở trạng thái hiển thị. Trạng thái này được kiểm soát bởi một nút bật/tắt trạng thái của div khi được nhấp vào. Điều này lần lượt chuyển đổi giữa các phong cách của hai trạng thái khác nhau

Trong câu lệnh

2 nội tuyến, chúng tôi sử dụng cú pháp

3 thay vì cú pháp

2/

5 thông thường. Phần

5 nằm sau dấu chấm phẩy. Và hãy nhớ luôn gọi hoặc sử dụng trạng thái sau khi nó được khởi tạo. Ví dụ, trong bản demo cuối cùng đó, trạng thái phải ở trên kiểu của thành phần

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    

    
  );
}
export default App;

9

Phong cách phản ứng vui vẻ

Đó là một bọc, folks. Chúng tôi đã xem xét một số cách khác nhau để viết kiểu trong ứng dụng React. Và không phải cái nào tốt hơn cái nào; . Hy vọng rằng bây giờ bạn đã hiểu rõ về chúng và biết rằng bạn có rất nhiều công cụ trong kho vũ khí tạo kiểu React của mình