Các cách khác nhau để viết CSS trong React PlatoBlockchain Data Intelligence. Tìm kiếm dọc. Ái.

Các cách khác nhau để viết CSS trong React

Dấu thời gian: ngày 22 tháng 2022 năm 10 24:XNUMX sáng

Tất cả chúng ta đều quen thuộc với cách tiêu chuẩn liên kết một biểu định kiểu đến <head> của một tài liệu HTML, phải không? Đó chỉ là một trong số những cách chúng ta có thể viết CSS. Nhưng nó trông như thế nào để tạo kiểu 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 ứng dụng React. Một số trùng lặp với phong cách truyền thống, những người khác không quá nhiều. Nhưng chúng ta hãy đếm tất cả những cách chúng ta có thể làm được.

Nhập các bảng định kiểu bên ngoài

Như tên cho thấy, 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 <head>:

  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.

Thích bài viết này:

import "./style.css";

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

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

Trong ví dụ này, một tệp CSS được nhập vào một App.js từ /Components/css thư mục.

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

Bạn có thể quen với việc nghe nói rằng kiểu nội tuyến không phải là điều tuyệt vời cho khả năng bảo trì và điều gì không tốt, 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ì ít gặp vấn đề hơn trong React, vì CSS thường đã nằm bên trong cùng một tệp.

Đây là một ví dụ siêu đơn giản về tạo kiểu nội tuyến trong React:

<div className="main" style={{color:"red"}}>

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 dáng cho các phần tử khác nhau.
  2. Sau đó, thêm nó vào một phần tử bằng cách sử dụng style và sau đó chọn thuộc tính để tạo kiểu.

Hãy xem điều đó trong ngữ cảnh:

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

Ví dụ này chứa một styles đối tượng chứa thêm hai đối tượng, một đối tượng .main và lớp khác dành cho đầu vào văn bản, chứa các quy tắc kiểu tương tự như những gì chúng ta mong đợi thấy trong một biểu định kiểu bên ngoài. Những đối tượng đó sau đó được áp dụng cho style thuộc tính của các phần tử có trong đánh dấu được trả về.

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

Sử dụng mô-đun CSS

Mô-đun CSS… Cái quái gì đã xảy ra với những người đó, phải không? Chúng có lợi ích của các biến phạm vi cục bộ và có thể được sử dụng ngay cùng với React. Nhưng 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 toàn cầu, bình thường, có thể được đưa trực tiếp vào trình duyệt hoặc được nối với nhau và được ghi vào một tệp để sử dụng trong sản xuất. Dữ liệu được sử dụng để ánh xạ những tên có thể đọc được của con người mà bạn đã sử dụng trong các tệp vớ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 xác định 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ỉ với một phần mở rộng khác (ví dụ: styles.module.css). Đây là cách họ thiết lập:

  1. Tạo một tệp với .module.css như phần mở rộng.
  2. Nhập mô-đun đó vào ứng dụng React (như chúng ta đã thấy trước đó)
  3. Thêm một className đến 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 (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

Sử dụng các thành phần được tạo kiểu

Bạn đã sử dụng thành phần theo kiểu? Nó khá phổ biến và cho phép bạn xây dựng các thành phần tùy chỉnh bằng cách sử dụng CSS thực tế trong JavaScript của bạn. Một thành phần được tạo kiểu về cơ bản là một thành phần React có - sẵn sàng cho nó - các 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 biệt.

Cài đặt gói npm theo kiểu-thành phần 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 kiểu cho nó. Lưu ý việc sử dụng các ký tự mẫu được biểu thị bằng dấu gạch ngược trong Wrapper vật:

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 <Wrapper />;
}
export default App;

Trên đây Wrapper thành phần sẽ được hiển thị dưới dạng div chứa các kiểu đó.

Tạo kiểu có điều kiện

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

Đây là bản demo cho thấy điều đó:

Ở đây, chúng tôi đang thao tác với div display tài sản trên trạng thái hiển thị. Trạng thái này được điều khiển bởi một nút chuyển đổi trạng thái của div khi được nhấp vào. Điều này, đến lượt nó, chuyển đổi giữa các phong cách của hai trạng thái khác nhau.

Trong dòng if câu lệnh, chúng tôi sử dụng một ? thay vì bình thường if/else cú pháp. Các else một phần 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. Trong bản demo cuối cùng đó, chẳng hạn, trạng thái phải ở trên Wrapper các phong cách của thành phần.

Chúc bạn tạo kiểu React vui vẻ!

Đó là một cái bọc, các bạn! Chúng tôi đã xem xét một số cách khác nhau để viết các kiểu trong một ứng dụng React. Và nó không giống như cái nào tốt hơn cái còn lại; tất nhiên, cách tiếp cận bạn sử dụng tùy thuộc vào từng trường hợp. 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.

Dấu thời gian:

Thêm từ Thủ thuật CSS