CSS trong React – lớp phản ứng css trong thành phần

Đây là hướng dẫn về CSS để React. Ở đây chúng ta thảo luận về phần giới thiệu về CSS trong React, cách sử dụng nó với các ví dụ lập trình để hiểu rõ hơn.

Bạn đang xem : lớp react css trong component

CSS trong React

Giới thiệu về CSS trong React

Trong phản ứng, CSS js có thể được sử dụng như bất kỳ hằng số nào với tất cả các thuộc tính hoặc chúng ta có thể tạo một tệp riêng biệt nơi chúng ta có thể đặt tất cả CSS. Với sự trợ giúp của CSS trong phản ứng js, chúng ta có thể thiết kế giao diện của các thành phần. chúng tôi có thể thiết kế các thành phần theo yêu cầu của chúng tôi. Trong phản ứng js, nó mang lại cho chúng ta sự linh hoạt khi chúng ta có thể viết css chung, nghĩa là một CSS có thể được sử dụng bởi nhiều thành phần và chúng ta cũng có thể viết css duy nhất, nghĩa là chúng ta có thể viết CSS chỉ có thể được sử dụng bởi một thành phần.

Làm cách nào để sử dụng CSS để React?

Có nhiều cách để sử dụng css trong phản ứng js, chúng ta sẽ thảo luận về hai cách được sử dụng chính, một là sử dụng làm hằng số trên cùng một thành phần và một cách khác là sử dụng trên tệp riêng biệt có thể được sử dụng bởi nhiều thành phần khác. Hãy để chúng tôi thảo luận về cả cách thức và lợi ích của chúng.

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Viết CSS dưới dạng hằng số bên trong các thành phần

Trong cách tiếp cận này, chúng tôi xác định hằng số và bên trong hằng số, chúng tôi đặt tất cả thiết kế thuộc tính quan trọng, ví dụ: const x = {color: red, width: 20px} và hằng số này sẽ được gán trên bất kỳ thẻ HTML nào làm giá trị của thuộc tính style. Ví dụ: nếu chúng ta có thẻ Html div thì trên & lt; div style = x & gt; & lt; / div & gt; Ở đây chúng ta đã gán giá trị của x trên thẻ HTML div với giá trị của x. Với sự trợ giúp của phương pháp này, chúng ta có thể viết bất kỳ css nào trên hằng số x và giá trị của x có thể được sử dụng ở bất kỳ đâu trên thẻ HTML thành phần. Ở đây chúng tôi đang nhận được khả năng tái sử dụng nhưng vấn đề với cách tiếp cận này là css mà chúng tôi thiết kế ở đây sẽ không được sử dụng bởi các thành phần khác, có nghĩa là giá trị của x bị giới hạn trong các thành phần hiện tại và chúng tôi không thể sử dụng x trên các thành phần khác .

Xem Thêm  Cách hiển thị hình ảnh trên canvas HTML5 hoạt động - hiển thị hình ảnh trong canvas

Viết CSS trên tệp riêng biệt

Theo cách tiếp cận này, chúng tôi sẽ tạo một tệp riêng biệt, nơi chúng tôi sẽ đặt tất cả logic css. Chúng ta cần tạo một lớp với bất kỳ tên nào như classname = ”test-class” và trên tệp, chúng ta có thể đặt bất kỳ css nào như .test-class {css thuộc tính names}, trong đó, chúng ta có thể đặt bất kỳ css nào. Ở đây, lợi ích chính của phương pháp này là chúng ta có thể sử dụng tệp này trong bất kỳ thành phần nào và do đó chúng ta có thể tiếp tục css cho bất kỳ số lượng thành phần nào. Nhưng có một vấn đề với cách tiếp cận, được cho là chúng ta muốn có một cái nhìn khác cho các thành phần khác nhau, thì trong trường hợp đó, nếu chúng ta thực hiện bất kỳ thay đổi nào đối với các thành phần này, nó sẽ ảnh hưởng đến các thành phần khác vì chúng cũng đang sử dụng cùng một css. Do đó, nó luôn phụ thuộc vào yêu cầu của chúng tôi về cách chúng tôi muốn sử dụng điều này. Nếu chúng ta cần bất kỳ thiết kế độc đáo nào thì chúng ta nên sử dụng css làm hằng số trên cùng một tệp và nếu chúng ta cảm thấy rằng css đã cho sẽ giống nhau cho tất cả các thành phần thì chúng ta có thể đặt css vào tệp riêng biệt.

Một ví dụ về hai điều trên là nếu chúng ta có một nút và chúng ta biết rằng tất cả giao diện của nút sẽ giống nhau trong toàn bộ ứng dụng thì chúng ta có thể sử dụng một điểm chung cho css là bất kỳ tệp nào. Theo cách tương tự, nếu chúng ta có văn bản cho các mục đích khác nhau thì chúng ta cần phải viết css trên chính các thành phần vì các thay đổi là duy nhất cho các thành phần.

Các ví dụ để triển khai CSS trong React

Trong phần bên dưới, chúng tôi đã đưa ra bốn ví dụ về react css, trong các ví dụ, ba ví dụ đầu tiên giải thích cách sử dụng của css dưới dạng hằng số sẽ chỉ khả dụng cho cùng một tệp và trong ví dụ thứ tư, chúng tôi đã lấy một tệp riêng biệt mà chúng tôi đã viết css và tệp đó sẽ có sẵn cho nhiều tệp khác của các thành phần phản ứng. Trong trường hợp nếu chúng ta muốn chạy các ví dụ này thì chúng ta có thể tạo một tệp có tên bất kỳ với HTML làm phần mở rộng như xss.html và trên tệp đặt phần mã phản ứng javascript trên javascript và HTML trên phần HTML và chúng ta có thể xem kết quả thực thi của các tệp.

Xem Thêm  Nhận giá trị hoặc tùy chọn đã chọn trong hộp chọn sử dụng JavaScript - javascript lấy giá trị chọn

Ví dụ # 1

Vui lòng xem ví dụ dưới đây cùng với màn hình đầu ra:

Mã:

var Shape = React.createClass ({
// Hằng số CSS cho thiết kế hình dạng thành phần phản ứng
trình tạo kiểu tócVí dụ: {
chiều cao: "56px",
chiều rộng: "56px",
nền: "đỏ"
},
kết xuất: function () {
trở về (
& lt; div style = {this.stylerExample} & gt; & lt; / div & gt;
);
}
});
React.render (
& lt; Hình dạng / & gt ;,
document.getElementById ('main'));
Html
& lt; div id = "main" & gt; & lt; / div & gt;

Đầu ra:

CSS trong React1

Ví dụ # 2

Vui lòng xem ví dụ dưới đây cùng với màn hình đầu ra:

Mã:

var Shape = React.createClass ({
// Hằng số CSS cho thiết kế hình dạng thành phần phản ứng
trình tạo kiểu tócVí dụ: {
chiều cao: "59px",
chiều rộng: "59px",
backgroundColor: "red",
borderRadius: "70%"
},
kết xuất: function () {
trở lại (
& lt; div style = {this.stylerExample} & gt; & lt; / div & gt;
);
}
});
React.render (
& lt; Hình dạng / & gt ;,
document.getElementById ('main'));
Html,
& lt; div id = "main" & gt; & lt; / div & gt;
Màn hình,

Đầu ra:

CSS trong React2

Ví dụ # 3

Vui lòng xem ví dụ dưới đây cùng với màn hình đầu ra:

Mã:

var Shape = React.createClass ({
// Hằng số CSS cho thiết kế hình dạng thành phần phản ứng
trình tạo kiểu tócVí dụ: {
borderBottom: "56px solid red",
borderLeft: "26px solid trong suốt",
chiều cao: "3",
borderRight: "26px solid trong suốt",
chiều rộng: "135px"
},
kết xuất: function () {
trở lại (
& lt; div style = {this.stylerExample} & gt; & lt; / div & gt;
);
}
});
React.render (
& lt; Hình dạng / & gt ;,
document.getElementById ('main'));
Html,
& lt; div id = "main" & gt; & lt; / div & gt;

Đầu ra:

shape design

Ví dụ # 4

Vui lòng xem ví dụ dưới đây cùng với màn hình đầu ra:

Mã:

var Shape = React.createClass ({
kết xuất: function () {
trở lại (
& lt; div className = "shape-class" & gt; & lt; / div & gt;
);
}
});
React.render (
& lt; Hình dạng / & gt ;,
document.getElementById ('main'));
Html,
& lt; div id = "main" & gt; & lt; / div & gt;
CSS,
// Đây là css được viết trên tệp riêng biệt cho thấy rằng các thành phần tệp khác cũng có thể sử dụng chúng.
.shape-class {
border-left: 90px solid trong suốt;
chiều cao: 0;
border-right: 90px solid trong suốt;
chiều rộng: 0;
border-bottom: 90px solid red;
}

Đầu ra:

file components

Kết luận

Từ hướng dẫn này, chúng tôi đã học được khái niệm cơ bản về hoạt động của css phản ứng, chúng tôi đã học được các cách sử dụng chính và cách khác nhau mà chúng tôi có thể sử dụng css trong phản ứng. Chúng tôi tập trung vào một số ví dụ quan trọng về css trong phản ứng js đã tiết lộ quy trình của nó.

Các bài báo được đề xuất

Đây là hướng dẫn về CSS để React. Ở đây chúng ta thảo luận về phần giới thiệu về CSS trong React, cách sử dụng nó với các ví dụ lập trình. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –

Xem Thêm  PXtoEM.com Chuyển đổi PX sang EM được thực hiện đơn giản. - px để chuyển đổi

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề lớp phản ứng css trong thành phần

23 Boss Level Challenge 3 – 01 A New Challenge Format and What We’ll Make A Blog

alt

  • Tác giả: Free Course
  • Ngày đăng: 2022-07-11
  • Đánh giá: 4 ⭐ ( 5317 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: UPDATE WEEKLY

    The Complete 2022 Web Development Bootcamp By Dr. Angela Yu
    Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, MongoDB, Web3 and DApps

    ✅Don’t Forget to LIKE 👍 SUBSCRIBE 🔔️️️ SHARE ↗️

Hướng dẫn học CSS3 & HTML5 (Phần 4: Chi tiết cuối cùng)

  • Tác giả: vnsolution.com.vn
  • Đánh giá: 4 ⭐ ( 1076 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn học CSS3 & HTML5 bởi các chuyên gia hàng đầu

Cách thêm nhiều lớp trong Material UI bằng cách sử dụng các lớp đạo cụ

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 8268 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] bạn có thể sử dụng nội suy chuỗi:

Class (Lớp) & ID sử dụng trong css

  • Tác giả: daotaolaptrinh.edu.vn
  • Đánh giá: 5 ⭐ ( 6449 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong các bài học trước, chúng ta đã được học các thuộc tính CSS về background, color, font,… Tuy nhiên, bạn cũng nhận ra là khi áp dụng một thuộc tính CSS

30 Bộ chọn CSS bạn phải thuộc lòng

  • Tác giả: code.tutsplus.com
  • Đánh giá: 4 ⭐ ( 5715 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như vậy, bạn đã học được các bộ chọn cơ bản id, lớp và phần tử con – và sau đó bạn nghĩ rằng bao nhiêu đó đã đủ? Nếu vậy, bạn đang bỏ lỡ một cấp độ linh hoạt lớn hơn. Mặc dù rất nhiều các bộ chọn…

Cấu trúc toàn diện CSS cho lập trình

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 3 ⭐ ( 9273 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Những cách thiết lập phổ biến cho nền tảng bootstrap CSS tùy biến giúp phát triển bộ nhận diện website thân thiện

Hiệu ứng trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 8636 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình