Hướng dẫn nhanh về các thành phần được tạo kiểu với các ví dụ tương tác

Tôi nghĩ rằng khi tôi lần đầu tiên đọc về các thành phần theo kiểu. Và sau đó tôi quay lại ngay với các thành phần React đã thử và thử nghiệm của mình.

Nhưng sau đó Max Stoiber, người đồng sáng tạo các thành phần theo kiểu, đã cho chúng tôi xem thư viện mới của mình tại bootcamp mã hóa React in Flip Flops. Cơn thịnh nộ đó

Tôi khó có thể kiềm chế sự phấn khích của mình. Cuối cùng tôi đã hiểu khái niệm đằng sau các thành phần theo kiểu. Nó mở ra rất nhiều khả năng mới cho cách tạo kiểu các thành phần. Nó đơn giản hóa cách cấu trúc các ứng dụng web. Và nó đã thực thi tính nhất quán trong kiểu dáng của các ứng dụng React.

Tất cả bắt đầu với các mẫu chữ được gắn thẻ

Bạn có thể nghĩ rằng tôi là một trường học hơi cũ nhưng tôi tin rằng nếu bạn muốn thực sự hiểu bất kỳ ý tưởng nào, bạn cần phải quấn đầu xung quanh các khái niệm cơ bản. Chúng tôi có thể lặn thẳng vào các thành phần theo kiểu. Nhưng trước tiên, hãy cùng tìm hiểu điều gì đã khơi dậy sự tò mò của Max và Glen trước khi họ bắt đầu dự án và thực sự xây dựng các thành phần theo kiểu.

Mẫu chữ ES6 bằng chữ đơn giản hóa cách bạn có thể trộn các biến và văn bản. Nếu bạn có hai biến: tên và tâm trạng, với các giá trị được gán lần lượt của Alice Alice và và hạnh phúc, thì mẫu chữ:

const câu = `$ {name} là $ {tâm trạng} .`;

sẽ tạo ra một câu: xông Alice là hạnh phúc.

Tagged mẫu chữ sẽ đưa cú pháp một bước xa hơn.

Thẻ là các hàm JavaScript. Nhưng có hai sự khác biệt cần thiết so với các chức năng thông thường:

  • chức năng thẻ được gọi bằng cách sử dụng ký hiệu backticks thay vì dấu ngoặc đơn. Trong ví dụ dưới đây, chúng tôi đang gọi hàm helloTag bằng cách gói các đối số trong backticks:
helloTag` $ {name} là $ {tâm trạng} .`;
  • JavaScript xử lý mẫu theo nghĩa đen - mọi thứ giữa các backticks - làm đối số hàm. Trong bước đầu tiên, JavaScript biến đổi mẫu bằng chữ thành một chuỗi các chuỗi. Các chuỗi được theo sau bởi các biến được trích xuất. Nếu chúng ta lấy ví dụ ở trên, các đối số được chuyển đổi được chuyển đến helloTagf rối sẽ trông như sau:
["", "là", "."], Tên, tâm trạng

Đối số đầu tiên, một mảng, chứa tất cả các chuỗi mà chúng ta đã đặt trước, giữa và sau tên và các biến tâm trạng. Trong ví dụ của chúng tôi, chuỗi đầu tiên trống vì không có gì trước tên. Hai đối số tiếp theo, tên và tâm trạng, được trích xuất từ ​​mẫu bằng chữ.

Bây giờ, hàm helloTag có thể áp dụng bất kỳ logic nào cho mảng văn bản, mảng tên và các biến tâm trạng và trả về kết quả mong muốn.

Hãy để Lừa tạo một hàm thẻ, helloTag, sẽ có ba đối số: một mảng văn bản, tên và biến tâm trạng. Và đây là logic mà nó sẽ sử dụng: nếu giá trị của tâm trạng là "hạnh phúc, nó sẽ trả về một câu chào thông thường. Trong tất cả các trường hợp khác, nó sẽ trả về phiên bản vui vẻ của lời chào:

const helloTag = (văn bản, tên, tâm trạng) => {
  if (tâm trạng === 'hạnh phúc') {
    trả về `Chào $ {name}!`;
  } khác {
    return `Chào $ {name}, bạn thật tuyệt vời!`;
  }
}
const chúc mừng = helloTag` $ {name} là $ {tâm trạng} .`;

Bây giờ, nếu chúng ta gán gán cho Alice Alice tên cho và tâm trạng vui vẻ, thì chức năng helloTag sẽ trở lại: Hồi Hi Alice! Nếu chúng ta thay đổi giá trị của tâm trạng thành bất kỳ từ nào khác ngoài vui mừng - hãy nói rằng kích thích

Nhưng làm thế nào bạn có thể sử dụng kiến ​​thức này để tạo kiểu cho các thành phần React?

Các thành phần theo kiểu

Câu hỏi chính xác này làm Max và Glenn bối rối trong khi họ đang tìm kiếm một cách tốt hơn và phù hợp hơn về kiểu dáng các thành phần React. Aha! Thời điểm đã đến khi họ nhận ra rằng các mẫu chữ được gắn thẻ chấp nhận không chỉ các biến mà cả các hàm. Giống như trong ví dụ dưới đây:

const chúc mừng = helloTag` $ {name => `Xin chào $ {name}!`} `;

Ở đây, helloTag nhận được một mẫu bằng chữ. Khi chức năng được thực hiện bởi helloTag, helloTag có thể áp dụng logic tiếp theo cho giá trị được trả về và trả về kết quả.

Các thành phần theo kiểu cũng là chức năng thẻ. Nhưng thay vì chấp nhận các mẫu chào, họ chấp nhận các mẫu chữ có chứa các kiểu CSS. Và thay vì chào câu, họ trả về các thành phần React.

Hãy để tôi chỉ cho bạn cách nó hoạt động.

Lưu ý bên: Các ví dụ mã dưới đây là tương tác. Bạn có thể chơi xung quanh với chúng, thêm kiểu và thay đổi giá trị được gán. Bạn có thể kiểm tra các tệp khác nhau bằng cách nhấp vào tab của chúng. Hoặc nhấn nút màu cam, xanh da cam hoặc xanh dương ở trên cùng để chuyển giữa các chế độ xem khác nhau.

Nếu bạn muốn sử dụng các thành phần được tạo kiểu trong ứng dụng của mình, trước tiên bạn phải cài đặt các thành phần được tạo kiểu:

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

Dưới đây, tôi đã tạo một tiêu đề thành phần theo kiểu:

Styled.h1 là một chức năng thẻ. Nó trả về một thành phần React giống hệt với thành phần bên dưới:

nhập React từ 'Reac';
const Title = ({children}) => 

{children}

Vẻ đẹp của giải pháp này là các thành phần theo kiểu làm công việc nặng nhọc cho bạn - Tiêu đề thành phần của bạn sẽ có màu sắc của royalblue.

Tôi biết bạn đang nghĩ gì: nếu chúng ta phải viết các kiểu của mọi thành phần theo cách này, thì điều đó sẽ khác nhiều so với việc viết các lớp CSS. Rất may, các thành phần theo kiểu thông minh hơn nhiều!

Hãy tưởng tượng rằng bạn muốn giữ cho tiêu đề của bạn màu đen hầu hết thời gian và chỉ thỉnh thoảng làm nổi bật chúng bằng cách sử dụng một màu khác. Với các thành phần được tạo kiểu, chúng ta có thể tạo Tiêu đề nhận biết màu sẽ có màu đen theo mặc định và thay đổi thành royalblue bất cứ khi nào chúng ta vượt qua nó một chỗ dựa chính:

Bạn có thể chuyển đạo cụ cho Tiêu đề giống như bất kỳ thành phần React nào khác. Ở đây, Tiêu đề thứ hai nhận được chỗ dựa chính. Chúng ta có thể truy cập các đạo cụ bên trong một tuyên bố thành phần theo kiểu. Điều đó mở ra một thế giới hoàn toàn mới.

Ở trên, tôi đã xác định Tiêu đề thành phần theo kiểu. Bởi vì các đạo cụ có thể truy cập được bên trong khai báo thành phần theo kiểu, chúng ta có thể quyết định màu nào thành phần của chúng ta sẽ có. Hàm sử dụng toán tử ternary và trả về royalblue khi thuộc tính chính là true và màu đen khác.

Bạn không phải viết một cách rõ ràng như trong:

 Xin chào Bob, bạn thật tuyệt vời! 

Vượt qua chỗ dựa chính mà không có sự phân công cũng giống như vượt qua
chính = {đúng}.

Vì cánh cửa giờ đã rộng mở, hãy để Lôi làm cho Tiêu đề của chúng ta trở nên phổ quát hơn. Đôi khi bạn có thể cần Tiêu đề của mình để sử dụng phông chữ nhỏ hơn và đôi khi lớn hơn. Đôi khi bạn có thể muốn nó có trọng lượng bình thường và đôi khi bạn có thể muốn nó nổi bật và cho nó một trọng lượng phông chữ đậm. Và đôi khi bạn có thể muốn viết hoa hoặc viết hoa Tiêu đề.

Các thành phần theo kiểu cho phép bạn tạo một thành phần phổ quát duy nhất. Sau đó, bạn có thể sử dụng nó ở mọi nơi mà không cần suy nghĩ về phong cách nữa:

Trong ví dụ trên, kích thước phông chữ được gán các giá trị rõ ràng: 48px hoặc 32px. Mã như vậy là khó để duy trì khi codebase phát triển.

Chủ đề

Khi bạn tạo một tập hợp các thành phần được tạo kiểu để sử dụng sau này, bạn muốn thực thi kiểu dáng nhất quán trên ứng dụng. Nó luôn luôn có giá trị để thiết lập các quy tắc phong cách. Tốt nhất, trong một tập tin riêng biệt. Sau này, khi bạn phải thay đổi kiểu dáng, thay vì truy cập lại tất cả các thành phần của mình, bạn có thể thay đổi kiểu dáng chỉ ở một nơi.

Các thành phần được tạo kiểu cung cấp cho bạn một công cụ để thực hiện chính xác điều đó - chủ đề.

Chủ đề là một đối tượng JavaScript nơi bạn có thể xác định tham số kiểu dáng:

chủ đề const = {
  màu sắc: {
    chính: "royalblue",
    phụ: "teal",
    văn bản: "đen"
  },
  cỡ chữ: {
    xl: "2.4rem",
    lg: "1,8rem",
    md: "1.3rem",
    bước sóng: "1rem",
    sm: "0,75rem"
  }
}

Chủ đề ở trên xác định màu sắc và thuộc tính fontSize. Bạn sẽ có thể truy cập chúng trong tất cả các thành phần theo kiểu trên ứng dụng.

Nhưng trước tiên, bạn cần làm cho ứng dụng nhận biết chủ đề. Bạn phải chuyển nó dưới dạng chỗ dựa cho ThemeProvider - thành phần trình bao bọc được cung cấp bởi các thành phần được tạo kiểu:

nhập {ThemeProvider} từ "các thành phần theo kiểu";
nhập chủ đề từ "./theme.js";
ứng dụng const = () => (
  
    
       Xin chào, Alice!         )

Hãy lấy ví dụ trước để học cách sử dụng một chủ đề và cách truy cập các thuộc tính của nó bên trong các thành phần được tạo kiểu.

Trong Tiêu đề, bạn có thể truy cập đối tượng chủ đề thông qua props.theme. Ví dụ: để chọn màu của Tiêu đề, trước tiên bạn kiểm tra xem một thuộc tính đã cho đã được chuyển đến Tiêu đề (chính hay phụ). Sau đó trả về giá trị màu tương ứng được khai báo trong chủ đề. Nếu không có gì được thông qua, bạn trả về màu văn bản tiêu chuẩn.

Tiêu đề bây giờ cũng có thể quyết định về kích thước phông chữ của nó. Nó kiểm tra trước nếu một xl, lg, md hoặc sm prop đã được thông qua và - dựa vào đó - gán giá trị phù hợp cho thuộc tính kích thước phông chữ. Nếu không có prop nào được thông qua, nó sẽ gán giá trị của fontSize.nm được xác định trong chủ đề.

Chúng tôi vừa tạo ra một thành phần Tiêu đề linh hoạt. Bây giờ, bạn có thể sử dụng nó mà không phải lo lắng về CSS. Bạn có thể quyết định vẻ ngoài của nó bằng cách thông qua một bộ đạo cụ cụ thể.

Mở rộng các thành phần theo kiểu

Tạo chỉ một thành phần Tiêu đề là không đủ. Ví dụ: trên trang blog, bạn sẽ cần thẻ h1 cho tiêu đề bài đăng và thẻ h2 cho phụ đề. Bạn cũng cần đoạn văn để hiển thị văn bản.

Các thành phần theo kiểu có thể dễ dàng mở rộng. Bạn có thể tạo một Subtitlecomponent mới với thẻ h2 và sao chép và dán tất cả các quy tắc tạo kiểu từ Tiêu đề. Hoặc bạn có thể mở rộng thành phần Tiêu đề bằng phương thức withComponenthelper. Phụ đề sẽ có tất cả các thuộc tính của Tiêu đề nhưng sẽ sử dụng thẻ h2:

const Subtitle = Title.withComponent ("h2");

Bạn có thể mở rộng Tiêu đề để tạo thành phần Văn bản bằng thẻ p và - đồng thời - sửa màu của nó dưới dạng theme.text và đặt chiều cao của dòng thành 1,65? Ở đây cũng vậy, các thành phần theo kiểu tỏa sáng:

const Par Đoạn = Title.withComponent ("p");
const Text = Par Đoạn.extend`
  màu: $ {props => props.theme.colors.text};
  chiều cao dòng: 1,65;

Đầu tiên, chúng tôi đã tạo một thành phần Đoạn trung gian sẽ có tất cả các quy tắc tạo kiểu của Tiêu đề. Tuy nhiên, chúng tôi sẽ sử dụng thẻ p và sau đó là Textcomponent mở rộng Đoạn văn và đặt màu sắc và độ cao dòng của nó. Dưới đây bạn có thể kiểm tra mã cho các thành phần Tiêu đề, Phụ đề và Văn bản:

Các thành phần được tạo kiểu cho phép bạn viết CSS thông thường bằng JavaScript. Ngoài ra, bạn có thể lồng các kiểu CSS và các lớp giả. Bạn có thể thêm truy vấn phương tiện và thuộc tính. Cuối cùng, bằng cách sử dụng phương thức trình trợ giúp tiêmGlobal, bạn có thể thêm quy tắc kiểu dáng toàn cầu và nhập phông chữ.

Lớp giả

Để tìm hiểu cách sử dụng các lớp giả, hãy cho phép tạo một thành phần Nút sẽ thay đổi màu sắc khi chúng ta di chuột qua nó.

Ở trên, tôi lồng lớp giả: & hover để thay đổi màu bất cứ khi nào bạn di chuột qua nút. Bạn có thể sử dụng bất kỳ lớp giả nào có sẵn trong CSS theo cùng một cách.

Tiêm phong cách toàn cầu với các thành phần theo kiểu

Thay vì nhập tệp kiểu toàn cục, bạn có thể sử dụng trình trợ giúp tiêmGlobal để thêm kiểu toàn cục vào ứng dụng của mình. Trước tiên, bạn phải nhập trình trợ giúp tiêm chích:

nhập kiểu, {ThemeProvider, chíchGlobal} từ "thành phần theo kiểu";

Trong ví dụ dưới đây, tôi đang sử dụng tiêmGlobal để:

  • nhập các phông chữ và đặt họ phông chữ cho tất cả các thành phần vào thành Mont Monterrerrat.
  • thiết lập lại lề, paddings, và biên giới.
  • thay đổi kích thước phông chữ của phần tử gốc bằng cách sử dụng truy vấn phương tiện cho kích thước màn hình thấp hơn screen.medium và screen.mobile. Cả hai đều được xác định trong chủ đề.

Chủ đề thành phần theo kiểu thực thi tính nhất quán. Để tìm hiểu thêm, hãy khám phá một trong những tài liệu hay nhất mà tôi đã từng thấy: Tài liệu Thành phần theo kiểu.

Nhờ sự tò mò của Max và Glen, các thành phần được tạo kiểu cung cấp cho bạn một bộ công cụ tuyệt vời để tạo kiểu cho các ứng dụng React. Các hệ sinh thái thành phần theo kiểu đang bùng nổ. Truy cập trang Hệ sinh thái để khám phá các thành phần và hệ thống lưới sẵn sàng sử dụng. Kiểm tra nhiều công cụ khác được xây dựng với các thành phần theo kiểu.

Phần kết luận

Trong hướng dẫn này, bạn đã học được cách hoạt động của các mẫu chữ được gắn thẻ. Bạn cũng đã học cách sử dụng các thành phần theo kiểu để xây dựng các thành phần React phổ quát. Bây giờ bạn đã biết cách sử dụng một chủ đề để triển khai các kiểu nhất quán của ứng dụng tiếp theo của bạn.

Các thành phần được tạo kiểu là một cách mới để tạo kiểu cho các ứng dụng React. Ra khỏi hộp, các thành phần theo kiểu:

  • cho phép bạn xây dựng các thành phần tái sử dụng và phổ quát
  • thực thi tính nhất quán của kiểu dáng
  • cho phép bạn lồng kiểu
  • thêm tiền tố nhà cung cấp khi cần thiết
  • chỉ đơn giản là tuyệt vời!

Nếu bạn thích bài viết này, thậm chí 50 lần - tôi thực sự sẽ đánh giá cao nó và nó tạo ra sự khác biệt rất lớn đối với tôi.

Tôi đã xuất bản gần đây một hướng dẫn React miễn phí cho người mới bắt đầu. Nếu bạn muốn tìm hiểu cách xây dựng một ứng dụng web từ đầu thì đó là điểm khởi đầu tuyệt vời. Bạn sẽ học cách xây dựng một ứng dụng để giúp bạn tìm ra bộ phim hay nhất để xem Sweet Pumpkins