Không có cách nào đúng để tạo kiểu cho các thành phần React của bạn. Tất cả phụ thuộc vào mức độ phức tạp của ứng dụng front-end của bạn và cách tiếp cận mà bạn cảm thấy thoải mái nhất. Có bốn cách khác nhau để tạo kiểu ứng dụng React và trong bài đăng này, bạn sẽ tìm hiểu về tất cả chúng. Hãy bắt đầu với

Bạn đang xem: inline style trong react component

Không có cách nào đúng để tạo kiểu cho các thành phần React của bạn. Tất cả phụ thuộc vào mức độ phức tạp của ứng dụng front-end của bạn và cách tiếp cận mà bạn cảm thấy thoải mái nhất.

Có bốn cách khác nhau để tạo kiểu ứng dụng React và trong bài đăng này, bạn sẽ tìm hiểu về chúng tất cả các. Hãy bắt đầu với tạo kiểu nội tuyến.

Tạo kiểu nội tuyến

Các thành phần React bao gồm các phần tử JSX. Nhưng chỉ vì bạn không viết các phần tử HTML thông thường không có nghĩa là bạn không thể sử dụng phương pháp kiểu nội tuyến cũ.

Sự khác biệt duy nhất với JSX là các kiểu nội tuyến phải được viết dưới dạng một đối tượng thay vì một chuỗi.

Đây là một ví dụ đơn giản:

  nhập React từ "react";

xuất hàm mặc định App () {
  trở về (
      & lt; h1 style = {{color: "red"}} & gt; Xin chào Thế giới & lt; / h1 & gt;
  );
}  

Trong thuộc tính style ở trên, tập hợp các dấu ngoặc nhọn đầu tiên sẽ cho trình phân tích cú pháp JSX của bạn biết rằng nội dung giữa các dấu ngoặc là JavaScript (chứ không phải là một chuỗi). Bộ dấu ngoặc nhọn thứ hai sẽ khởi tạo một đối tượng JavaScript.

Tên thuộc tính kiểu có nhiều hơn một từ được viết bằng camelCase thay vì sử dụng kiểu gạch nối truyền thống. Ví dụ: thuộc tính text-align thông thường phải được viết dưới dạng textAlign trong JSX:

  import React từ "react";

xuất hàm mặc định App () {
  trở về (
      & lt; h1 style = {{textAlign: "center"}} & gt; Xin chào Thế giới & lt; / h1 & gt;
  );
}  

Vì thuộc tính style là một đối tượng, bạn cũng có thể tách kiểu bằng cách viết nó dưới dạng một hằng số. Bằng cách này, bạn có thể sử dụng lại nó trên các phần tử khác nếu cần:

  import React từ "react";

const pStyle = {
  fontSize: '16px',
  màu: 'xanh lam'
}

xuất hàm mặc định App () {
  trở về (
      & lt; p style = {pStyle} & gt; Hôm nay thời tiết nắng và có thể có mưa nhỏ. & lt; / p & gt;
  );
}  

Nếu bạn cần mở rộng kiểu đoạn văn của mình xuống dòng, bạn có thể sử dụng toán tử trải đối tượng. Điều này sẽ cho phép bạn thêm các kiểu nội tuyến vào đối tượng kiểu đã được khai báo của mình:

  import React từ "react";
const pStyle = {
  fontSize: "16px",
  màu: "xanh lam"
};
xuất hàm mặc định App () {
  trở về (
    & lt; & gt;
      & lt; p style = {pStyle} & gt;
        Hôm nay thời tiết có nắng, khả năng mưa nhỏ.
      & lt; / p & gt;
      & lt; p style = {{... pStyle, color: "green", textAlign: "right"}} & gt;
        Khi đi làm, đừng quên mang theo ô bên mình nhé!
      & lt; / p & gt;
    & lt; / & gt;
  );
}
 

Kiểu nội tuyến là ví dụ cơ bản nhất về CSS trong kỹ thuật tạo kiểu JS.

Một trong những lợi ích khi sử dụng cách tiếp cận kiểu nội tuyến là bạn sẽ có một kỹ thuật tạo kiểu tập trung vào thành phần. Bằng cách sử dụng một đối tượng để tạo kiểu, bạn có thể mở rộng phong cách của mình bằng cách trải rộng đối tượng. Sau đó, bạn có thể thêm nhiều thuộc tính style hơn vào nó nếu muốn.

Xem Thêm  Cách thêm JavaScript vào HTML - nhúng javascript vào html

Nhưng trong một dự án lớn và phức tạp, nơi bạn có hàng trăm thành phần React để quản lý, đây có thể không phải là lựa chọn tốt nhất cho bạn.

Bạn không thể chỉ định lớp giả bằng các kiểu nội tuyến. Điều đó có nghĩa là : hover , : focus , : active hoặc : Visit đi ra ngoài cửa sổ thay vì thành phần .

Ngoài ra, bạn không thể chỉ định các truy vấn phương tiện để tạo kiểu đáp ứng. Hãy xem xét một cách khác để tạo kiểu ứng dụng React của bạn.

CSS Stylesheets

Khi bạn tạo một ứng dụng React bằng cách sử dụng create-react-app , bạn sẽ tự động sử dụng webpack để xử lý quá trình nhập và xử lý nội dung.

Điều tuyệt vời về webpack là vì nó xử lý nội dung của bạn, bạn cũng có thể sử dụng cú pháp JavaScript import để nhập tệp .css vào tệp JavaScript của bạn. Sau đó, bạn có thể sử dụng tên lớp CSS trong các phần tử JSX mà bạn muốn tạo kiểu, như sau:

 . Paragraph-text {
  font-size: 16px;
  màu: 'xanh lam';
}  
  nhập React, {Thành phần} từ 'react';
nhập './style.css';

xuất hàm mặc định App () {
  trở về (
    & lt; & gt;
      & lt; p className = "paragraph-text" & gt;
        Hôm nay thời tiết có nắng, khả năng mưa nhỏ.
      & lt; / p & gt;
    & lt; / & gt;
  );
}  

Bằng cách này, CSS sẽ được tách ra khỏi các tệp JavaScript của bạn và bạn chỉ có thể viết cú pháp CSS như bình thường.

Bạn thậm chí có thể bao gồm một khung CSS chẳng hạn như Bootstrap trong ứng dụng React của bạn bằng cách sử dụng phương pháp này. Tất cả những gì bạn cần là nhập tệp CSS vào thành phần gốc của mình.

Phương pháp này sẽ cho phép bạn sử dụng tất cả các tính năng CSS, bao gồm cả lớp giả và truy vấn phương tiện. Nhưng hạn chế của việc sử dụng biểu định kiểu là kiểu của bạn sẽ không được bản địa hóa cho thành phần của bạn.

Tất cả các bộ chọn CSS đều có cùng phạm vi toàn cầu. Điều này có nghĩa là một bộ chọn có thể có các tác dụng phụ không mong muốn và phá vỡ các yếu tố hình ảnh khác trong ứng dụng của bạn.

Cũng giống như các kiểu nội tuyến, việc sử dụng bảng định kiểu vẫn khiến bạn gặp vấn đề về việc duy trì và cập nhật CSS trong một dự án lớn. < / p>

Mô-đun CSS

Mô-đun CSS là một tệp CSS thông thường có tất cả các lớp của nó và tên hoạt ảnh được đặt trong phạm vi cục bộ theo mặc định.

Mỗi thành phần React sẽ có tệp CSS riêng và bạn cần nhập các tệp CSS bắt buộc vào thành phần của mình.

Để React biết bạn đang sử dụng mô-đun CSS, hãy đặt tên tệp CSS của bạn bằng quy ước [name] .module.css .

Đây là một ví dụ:

 . BlueParagraph {
  màu sắc: xanh lam;
  text-align: left;
}
.GreenParagraph {
  màu xanh lá cây;
  text-align: phải;
}  
  nhập React từ "react";
nhập kiểu từ "./App.module.css";
xuất hàm mặc định App () {
  trở về (
    & lt; & gt;
      & lt; p className = {styles.BlueParagraph} & gt;
        Hôm nay thời tiết có nắng, khả năng mưa nhỏ.
      & lt; / p & gt;
      & lt; p className = {styles.GreenParagraph} & gt;
        Khi đi làm, đừng quên mang theo ô bên mình nhé!
      & lt; / p & gt;
    & lt; / & gt;
  );
}  

Khi bạn tạo ứng dụng của mình, webpack sẽ tự động tìm kiếm các tệp CSS có tên .module.css . Webpack sẽ lấy các tên lớp đó và ánh xạ chúng thành một tên bản địa hóa mới, được tạo.

Đây là hộp cát cho ví dụ trên. Nếu bạn kiểm tra đoạn màu xanh lam, bạn sẽ thấy rằng lớp phần tử được chuyển đổi thành _src_App_module__BlueParagraph .

Mô-đun CSS đảm bảo rằng cú pháp CSS của bạn có phạm vi cục bộ.

Một lợi thế khác của việc sử dụng Mô-đun CSS là bạn có thể tạo một lớp mới bằng cách kế thừa từ các lớp khác mà bạn đã viết. Bằng cách này, bạn sẽ có thể sử dụng lại mã CSS mà bạn đã viết trước đó, như sau:

 . MediumParagraph {
  font-size: 20px;
}
.BlueParagraph {
  sáng tác: MediumParagraph;
  màu sắc: xanh lam;
  text-align: left;
}
.GreenParagraph {
  sáng tác: MediumParagraph;
  màu xanh lá cây;
  text-align: phải;
}  

Cuối cùng, để viết kiểu bình thường với phạm vi toàn cục, bạn có thể sử dụng bộ chọn : global trước tên lớp của bạn:

 : global .HeaderParagraph {
  font-size: 30px;
  text-biến đổi: chữ hoa;
}  

Sau đó, bạn có thể tham chiếu kiểu phạm vi toàn cục giống như một lớp bình thường trong tệp JS của mình:

  & lt; p className = "HeaderParagraph" & gt; Dự báo thời tiết & lt; / p & gt;  

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

Thành phần được tạo kiểu là thư viện được thiết kế cho React và React Native . Nó kết hợp cả CSS trong JS và các phương thức Mô-đun CSS để tạo kiểu cho các thành phần của bạn.

Để tôi cho bạn xem một ví dụ:

  import React từ "react";
nhập được tạo kiểu từ "thành phần được tạo kiểu";

// Tạo thành phần Tiêu đề sẽ hiển thị & lt; h1 & gt; gắn thẻ với một số phong cách
const Title = styled.h1`
  cỡ chữ: 1.5em;
  text-align: center;
  màu sắc: nhợt nhạt;
`;

xuất hàm mặc định App () {
  return & lt; Title & gt; Hello World! & lt; / Title & gt ;;
}  

Khi bạn viết phong cách của mình, bạn thực sự đang tạo một thành phần React với phong cách của bạn gắn liền với nó. Cú pháp trông vui nhộn của styled.h1 theo sau là biểu tượng nền có thể thực hiện được bằng cách sử dụng các ký tự mẫu được gắn thẻ của JavaScript.

Các thành phần được tạo kiểu được tạo ra để giải quyết các vấn đề sau:

  • CSS quan trọng tự động : Các thành phần được tạo kiểu theo dõi các thành phần nào được hiển thị trên một và tự động đưa các phong cách của họ và không có gì khác. Kết hợp với tính năng tách mã, điều này có nghĩa là người dùng của bạn tải lượng mã cần thiết ít nhất.
  • Không có lỗi tên lớp : Các thành phần được tạo kiểu tạo tên lớp duy nhất cho kiểu của bạn. Bạn không bao giờ phải lo lắng về sự trùng lặp, chồng chéo hoặc lỗi chính tả.
  • Xóa CSS dễ dàng hơn: Có thể khó biết liệu tên lớp đã được sử dụng ở đâu đó trong cơ sở mã của bạn hay chưa. Các thành phần được tạo kiểu làm cho điều đó trở nên rõ ràng, vì mọi bit của kiểu dáng đều được gắn với một thành phần cụ thể. Nếu thành phần không được sử dụng (mà công cụ có thể phát hiện) và bị xóa, tất cả các kiểu của thành phần sẽ bị xóa cùng với nó.
  • Tạo kiểu động đơn giản : Điều chỉnh kiểu của một thành phần dựa trên đạo cụ của nó hoặc chủ đề toàn cầu rất đơn giản và trực quan mà bạn không cần phải quản lý hàng chục lớp theo cách thủ công.
  • Bảo trì không đau : Bạn không bao giờ phải tìm kiếm các tệp khác nhau để tìm kiểu ảnh hưởng đến thành phần của bạn, vì vậy bảo trì là một miếng bánh bất kể cơ sở mã của bạn lớn đến mức nào.
  • Tiền tố nhà cung cấp tự động : Viết CSS của bạn theo tiêu chuẩn hiện tại và để các thành phần được tạo kiểu xử lý phần còn lại.

Bạn nhận được tất cả những lợi ích này trong khi vẫn viết cùng một CSS mà bạn biết và yêu thích - chỉ ràng buộc với các thành phần riêng lẻ.

Nếu bạn muốn tìm hiểu thêm về các thành phần được tạo kiểu, bạn có thể truy cập tài liệu và xem thêm các ví dụ.

Kết luận

Nhiều d các nhà phát triển vẫn đang tranh luận về cách tốt nhất để tạo kiểu ứng dụng React. Có cả lợi ích và hạn chế khi viết CSS theo cách phi truyền thống.

Trong một thời gian dài, việc tách tệp CSS và tệp HTML của bạn được coi là phương pháp hay nhất, mặc dù nó gây ra rất nhiều vấn đề .

Nhưng ngày nay, bạn có quyền lựa chọn viết CSS tập trung vào thành phần. Bằng cách này, kiểu của bạn sẽ tận dụng được tính mô-đun và khả năng tái sử dụng của React. Giờ đây, bạn có thể viết CSS bền bỉ và có thể mở rộng hơn.


Xem thêm những thông tin liên quan đến chủ đề kiểu nội tuyến trong thành phần phản ứng

ĐỀ 05 - PHẦN 01 - ÔN THI TNTHPTQG 2022

  • Tác giả: Di Mai Thuc
  • Ngày đăng: 2022-06-21
  • Đánh giá: 4 ⭐ ( 4015 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link đề https://drive.google.com/file/d/1czDy58Gacw27P4tumAUWvWwBmVvtsvog/view?usp=sharing

Phản xạ toàn phần là gì? Ứng dụng của hiện tượng phản xạ toàn phần và Bài tập

  • Tác giả: thptsoctrang.edu.vn
  • Đánh giá: 4 ⭐ ( 3876 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày nay, khi nói đến 'cáp quang', có lẽ rất nhiều em đã biết chúng được sử dụng để truyền thông tin (đường truyền internet, truyền hình,...) và đây chính là

Cách đặt kiểu nội tuyến -webkit-tràn-cuộn trên thành phần phản ứng

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 2499 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang sử dụng kiểu nội tuyến cho thành phần phản ứng. Chúng có thể được định nghĩa như dưới đây. const style= { position: 'absolute', left: 0, right: 0, bottom: '7.5%', top: '5.2rem',…

Nội lực là gì ? Các thành phần của nội lực

  • Tác giả: 24h68.com
  • Đánh giá: 5 ⭐ ( 1764 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nội lực là gì? Các thành phần của nội lực? Tác dụng và quy ước dấu các thành phần của nội lực .. Nội lực là lực... được sinh ra do...

PCR – 6 thành phần quan trọng cần hiểu cho đúng

  • Tác giả: tapchisinhhoc.com
  • Đánh giá: 5 ⭐ ( 4765 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có thể nhiều người đã biết và thông thuộc các thành phần phản ứng PCR, nhưng hiểu rõ bản chất, vai trò và khả năng tùy biến từng thành phần..

Phần Tử Khối (Block Element) Và Phần Tử Nội Tuyến (Inline Element) Trong HTML

  • Tác giả: nguyenhung.net
  • Đánh giá: 4 ⭐ ( 1446 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong HTML, hầu hết các phần tử được phân thành 2 loại đó là: phần tử khối (block element) và phần từ nội tuyến (inline element)

[Tự học THML] Các yếu tố khối(block) và nội tuyến(inline) trong HTML

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 4912 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cafedev chia sẻ về Mỗi phần tử HTML có một giá trị hiển thị mặc định, tùy thuộc vào loại phần tử đó.

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

By ads_php