Cách thêm CSS vào ứng dụng React

Trong ảnh này, chúng ta sẽ tìm hiểu những cách tốt nhất để thêm mã CSS vào React JS hoặc vào ứng dụng React. CSS rất quan trọng trong việc làm cho ứng dụng của bạn trở nên thân thiện với người dùng và hấp dẫn về mặt hình ảnh. Dưới đây là các cách khác nhau để thêm CSS vào ứng dụng React

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

Bạn có thể tạo một tệp CSS mới trong thư mục dự án của mình và thêm CSS của bạn vào bên trong nó. Sau đó, bạn có thể nhập tệp vào trang thành phần, lớp hoặc React JS của mình

Bạn có thể sử dụng mã bên dưới để nhập biểu định kiểu CSS bên ngoài

import "./styles.css";

CSS nội tuyến

CSS nội tuyến có lẽ là phương pháp phổ biến nhất và nhanh nhất trong ba phương pháp để thêm CSS vào ứng dụng React. Tuy nhiên, nó có nhiều nhược điểm và thường không được khuyến khích sử dụng trừ khi bạn có một ứng dụng rất nhỏ

Chúng tôi tạo một đối tượng chứa các tham chiếu khác nhau, sau đó chúng tôi gọi đối tượng này bằng thuộc tính

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

5

Ví dụ CSS được thêm vào như hình bên dưới

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

The CSS is then added to an element like so

các thành phần được tạo kiểu

Các thành phần được tạo kiểu cho phép bạn viết CSS thực trong JavaScript của mình. Ưu điểm chính là bạn có thể thêm mã điều kiện và sử dụng các biến và hàm trong CSS

Bạn có thể cài đặt

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

6 bằng lệnh sau

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

0

Tiếp theo, bạn cần nhập

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

6 vào thành phần của mình. Sau đó, bạn có thể tạo một biến mới chứa CSS. Tên biến giống nhau với dấu ngoặc mở và đóng sẽ hiển thị hoặc tạo phần tử HTML với các kiểu đã thêm trước đó

import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid red;
  color:red;
`
//display the HTML
render(
  

    Button
  
);

mô-đun CSS

Bạn cũng có thể dễ dàng thêm các kiểu có phạm vi, vì bạn chỉ cần tạo một tệp có phần mở rộng là

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

2, như hình bên dưới

// ComponentName.module.css

.Red {
  color: #f00;
}

.Blue {
  color: #00f;
}

Sau đó, bạn nhập các kiểu như sau

import styles from "./ComponentName.module.css";

Bây giờ bạn có thể sử dụng các kiểu như hình bên dưới

________số 8

CSS nguyên tử

Một trong những khung CSS nguyên tử phổ biến nhất hiện có là Tailwind. Nếu bạn đưa Tailwind vào dự án của mình bằng cách làm theo hướng dẫn chính thức, thì bạn có thể sử dụng

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

3 mà không cần chạm vào CSS

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

0

Cảm xúc

Các thành phần được tạo kiểu không phải là thư viện duy nhất cho phép bạn tạo các thành phần có kiểu nhúng. Một thay thế là Cảm xúc. Điều tuyệt vời nhất về Emotion là framework của nó là bất khả tri, vì vậy bạn có thể mang kiến ​​thức của mình đến các thư viện và framework khác ngoài React, trong khi khá giống với styled-components, vì vậy bạn có thể thay đổi cách nhập trong một số trường hợp)

---

Trong ảnh này, chúng tôi đã xem xét các tùy chọn sẽ đánh dấu vào hầu hết các ô cần thiết khi thêm CSS vào ứng dụng của bạn

Tạo kiểu là một phần quan trọng trong việc phát triển bất kỳ ứng dụng web hiện đại nào. Thời của các trang web HTML đơn giản đã qua lâu rồi. Bây giờ các trang web cần phải có thiết kế đẹp để thu hút người dùng và có vẻ đáng tin cậy. Hãy xem cách bạn có thể tạo kiểu cho các ứng dụng React của mình

Bài viết dưới đây không trình bày danh sách đầy đủ tất cả các cách tạo kiểu cho ứng dụng React, mà chỉ là một số cách được chọn mà cá nhân tôi thấy hữu ích

tệp CSS

Cách rõ ràng và đơn giản nhất để tạo kiểu cho ứng dụng React là nhập các tệp CSS. Đây thực sự là cách làm việc mặc định và nếu bạn đã sử dụng ứng dụng tạo-phản ứng để thiết lập dự án của mình thì bạn nên chuẩn bị sẵn tất cả và hoạt động. Hãy xem ứng dụng của bạn. js và ứng dụng. tập tin css

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

1

Trong đoạn mã trên được lấy từ Ứng dụng. css, bạn có thể thấy rằng chúng tôi đang sử dụng CSS thông thường để tạo kiểu cho ứng dụng React. Cũng giống như trong bất kỳ ứng dụng web nào khác, hãy đảm bảo rằng bộ chọn thực sự đang nhắm mục tiêu các phần tử có liên quan và thì đấy. Bạn vừa tạo kiểu cho ứng dụng React của mình

Để chứng minh quan điểm của mình, tôi đã thêm mã tùy chỉnh tạo kiểu cho phần tử h1 ở đầu tệp. Nó khớp với phần tử h1 mà tôi đã thêm vào trong JSX của Ứng dụng. js

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

2

Hãy xem liệu nó có áp dụng các kiểu có liên quan không

Ví dụ ứng dụng 1

Có vẻ như nó đã làm. Tất cả những điều kỳ diệu xảy ra vì

nhập khẩu '. /Ứng dụng. css’;

tuyên bố ở đầu Ứng dụng. js. Dòng mã này chịu trách nhiệm nhập các biểu định kiểu. Bây giờ bình luận nó ra và xem những gì sẽ xảy ra

Ví dụ ứng dụng 2

Nó trông không hoàn toàn giống nhau, phải không?

kiểu dáng nội tuyến

Kỹ thuật này đặc biệt hữu ích khi cố gắng thực hiện các thay đổi kiểu dáng rất nhỏ ở đây và ở đó. Hãy hoàn tác các thay đổi mà chúng tôi đã triển khai trong Ứng dụng. css để có một khởi đầu mới. Giả sử rằng lần này chúng ta muốn tạo kiểu cho phần tử h1 đó thành màu đỏ. Chúng ta có thể dễ dàng thực hiện nó bằng cách sử dụng thuộc tính style

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

3Ví dụ ứng dụng 3

Điều quan trọng cần chỉ ra là thuộc tính kiểu không chấp nhận mã CSS thông thường. Thay vào đó, nó mong đợi một đối tượng có thuộc tính là tên lạc đà của thuộc tính CSS. Các giá trị sẽ được cung cấp dưới dạng chuỗi. Để tham khảo chính xác hơn, vui lòng xem tài liệu chính thức về phong cách của React

Thành phần theo kiểu

Bạn đã bao giờ nghe nói về styled-components chưa? . Đó là cách yêu thích của tôi để tạo kiểu mã React. Bạn sẽ thấy tại sao

Tái bút. Để được giải thích chi tiết hơn về styled-components, vui lòng xem bài viết của Osman. Nó bao gồm các thư viện chi tiết hơn

Bạn có thể cài đặt các thành phần theo kiểu bằng cách chạy

$ npm cài đặt – lưu các thành phần theo kiểu

trong thư mục gốc của ứng dụng React của bạn

Sau đó, chúng ta có thể chỉ cần xác định thành phần YellowHeader mới của mình và bắt đầu sử dụng nó trên ứng dụng. Hãy xem nhanh mã

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

4Ví dụ ứng dụng 4

Đó là 3 cách cơ bản nhất để tạo style cho ứng dụng React. Điều quan trọng cần lưu ý là danh sách này không đầy đủ. Có nhiều lựa chọn hơn ngoài kia. Một số trong số đó sẽ được đề cập chi tiết hơn trong các bài viết sắp tới tại Upmostly

Bạn có thể thêm CSS vào thành phần React không?

Cách cài đặt CSS React?

CSS được sử dụng như thế nào trong React?

Tại sao tôi không thể nhập CSS vào React?