Tên lớp css cảm xúc

Vì JavaScript đã trải qua nhiều lần kiểm duyệt và cải tiến trong vài năm qua, chúng tôi đã thấy một số thư viện mới để xử lý CSS bên trong mã JavaScript. styled-components và Emotion là hai thư viện CSS-in-JS chính mà các nhà phát triển chủ yếu sử dụng khi tạo kiểu cho các thành phần trong các khung JavaScript phổ biến như React

Trong bài viết này, chúng tôi sẽ so sánh styled-components và Emotion, bao gồm sự khác biệt, nhược điểm và lợi ích

Tổng quan

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

Thư viện styled-components cho phép các nhà phát triển tạo các thành phần phản ứng theo kiểu mới và định kiểu lại các thành phần phản ứng hiện có. Props là các thành phần được tạo kiểu, đặc biệt đối với những thay đổi về kiểu dáng đối tượng

Theo ý kiến ​​của tôi, ưu điểm lớn nhất của styled-components là bạn có thể tạo kiểu cho bất kỳ thành phần nào bằng thư viện cụ thể này miễn là nó chấp nhận một className prop. Bạn cũng có thể sử dụng trình trợ giúp hàm withComponent để thay đổi thẻ kết xuất được gắn vào một thành phần cụ thể. Điều này có thể cần thiết nếu bạn muốn sử dụng lại các kiểu nhất định từ một thành phần cụ thể trong một thành phần khác sau này. Trong trường hợp như vậy, bạn sẽ phải thay đổi thẻ được hiển thị để thực hiện thao tác

Cảm xúc

Việc sử dụng cho Cảm xúc rất khác so với cách sử dụng của các thành phần theo kiểu. Tính năng chính của thư viện này là thành phần kiểu có thể dự đoán được để viết các kiểu CSS khác nhau bằng JavaScript. Thư viện này hỗ trợ cả kiểu chuỗi và kiểu đối tượng

Nói chung, có hai phương pháp chính để sử dụng Cảm xúc. framework-agnostic và với React. Có những lợi ích và hạn chế cho mỗi, như chúng ta sẽ thảo luận dưới đây

bất khả tri về khung

Không giống như các loại phương pháp tạo kiểu khác, cách tiếp cận theo khuôn khổ không yêu cầu plugin bên ngoài hoặc thiết lập bổ sung. Emotion đi kèm với một hệ thống hỗ trợ đáng tin cậy — bất kể khuôn khổ nào — thành thạo trong việc xử lý tiền tố nhà cung cấp tự động, bộ chọn lồng nhau và các chức năng khác

Hơn nữa, với cách tiếp cận không liên quan đến khung, thật dễ dàng để tạo các tên lớp khác nhau vì bạn có thể sử dụng các hàm CSS đơn giản nhất để làm như vậy

phương pháp phản ứng

Sử dụng phương pháp React với Emotion là cách tiếp cận tốt nhất để tạo tác phẩm thiết kế nội tuyến độc đáo và khác thường, đồng thời hoạt động tốt nhất khi được áp dụng trong môi trường xây dựng có thể định cấu hình. Khi bạn đang sử dụng phương pháp này, bạn sẽ nhận được hỗ trợ hỗ trợ CSS chuyên dụng để đảm bảo các tùy chọn kiểu dáng nâng cao, cũng như kết xuất phía máy chủ với cấu hình bằng không

So sánh styled-components với Emotion

Khi viết CSS cho JavaScript, cả styled-components và Emotion đều có hiệu quả cao, hoạt động tốt và có cơ sở dành riêng cho nhà phát triển sử dụng từng thư viện cho các mục đích cụ thể

Trong các phần sau, chúng tôi sẽ xem xét các lý do khác nhau để sử dụng từng thư viện để giúp bạn quyết định thư viện nào phù hợp với mình

Tại sao bạn lại chọn styled-components?

Styled-components là phiên bản được kiểm duyệt của các thành phần React, giúp dễ dàng chuyển props cho styled-components. Tính năng này làm cho quá trình viết CSS sử dụng styled-components dễ dàng hơn rất nhiều. Bạn cũng có thể thay đổi kiểu dáng và chỉnh sửa lại các thành phần thông thường hiện có thông qua các thành phần được tạo kiểu

Để thực hiện các tác vụ theo chủ đề, các thành phần theo kiểu là một tùy chọn tuyệt vời hỗ trợ nhiều giao diện, chủ đề và cảm giác để tùy chỉnh. Các thành phần được tạo kiểu cũng cho phép tạo kiểu toàn cầu có thể áp dụng cho tất cả các loại thành phần được tạo kiểu. Khi bạn tạo một kiểu chung có thể áp dụng cho tất cả các thành phần, bạn có thể tiết kiệm thời gian và công sức khi xử lý các thành phần có kiểu khác nhau cùng một lúc

Ngoài các tính năng được liệt kê ở trên, các thành phần được tạo kiểu có thể dễ dàng chuyển từ một thành phần HTML này sang các thành phần HTML khác. Tính linh hoạt này làm cho thư viện này trở thành một lựa chọn tốt hơn so với các phương pháp khác về cách viết CSS. Chẳng hạn, khi một số phần tử HTML nhất định được kết xuất bởi các thành phần theo kiểu, thì nhà phát triển có thể thêm các thuộc tính bổ sung cho các phần tử HTML đó

Cuối cùng, các thành phần được tạo kiểu tương thích với gần như tất cả các khung CSS để giúp bạn đáp ứng mọi nhu cầu về chủ đề và kiểu dáng của mình

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Tại sao nên sử dụng Cảm xúc để viết CSS?

Nói chung, Emotion thân thiện với nhà phát triển hơn các thư viện khác. Ưu điểm lớn nhất của Emotion là các kiểu đối tượng được xử lý dễ dàng để viết CSS

Lấy ví dụ, trường hợp của các thành phần được tạo kiểu, trong đó nhà phát triển phải tạo các tên duy nhất cho các thành phần khác nhau, đồng thời tránh các kiểu đặt tên giống hệt nhau. Nếu bạn không tuân theo các kiểu riêng biệt hoặc bạn đặt tên cho một thành phần mà không có bộ mô tả có ý nghĩa, thì mọi nỗ lực của bạn có thể bị lãng phí trong vài giây. Mặt khác, các tác vụ đặt tên khá đơn giản trong Cảm xúc, vì chúng dựa trên việc áp dụng các đạo cụ CSS

Cuối cùng, nhiều nhà phát triển thích Emotion hơn các lựa chọn thay thế CSS-in-JS khác vì kích thước nhỏ, hiệu suất cao và tính linh hoạt tổng thể của nó

Các tùy chọn kiểu dáng khác nhau với các thành phần được tạo kiểu và Cảm xúc

Tạo kiểu bằng cách sử dụng các thành phần được tạo kiểu

Chúng tôi sẽ bắt đầu bằng cách xem xét một số mã mẫu cho các thành phần kiểu dáng

import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
`

render(This my button component.)

Lưu ý rằng bạn có thể thay đổi kiểu của các thành phần hoặc tạo kiểu mới bằng cách triển khai các đạo cụ

import styled from '@emotion/styled'

const Button = styled.button`
  color: ${props =>
    props.primary ? 'hotpink' : 'turquoise'};
`

const Container = styled.div(props => ({
  display: 'flex',
  flexDirection: props.column && 'column'
}))

render(
  
    This is a regular button.
    This is a primary button.
  
)

Trong ví dụ dưới đây, chúng ta có thể sử dụng prop7_______ để tạo kiểu

import styled from '@emotion/styled'
const Basic = ({ className }) => (
  
Some text
)

const Fancy = styled(Basic)`
  color: hotpink;
`

render()

Cuối cùng, chúng ta có thể thay đổi thẻ kết xuất trong styled-components. Trong khối mã sau, hãy lưu ý cách thành phần thứ hai có cùng kiểu với Phần, nhưng hiển thị dưới dạng một bên

import styled from '@emotion/styled'

const Section = styled.section`
  background: #333;
  color: #fff;
`
const Aside = Section.withComponent('aside')
render(
  

    
This is a section
    
  
)

Sử dụng Cảm xúc để tạo kiểu bất khả tri cho khung

Vì Emotion được sắp xếp hợp lý cho các thành phần tạo kiểu, nên phương thức bất khả tri của khung khá đơn giản

import { css, cx } from '@emotion/css'

const color = 'white'

render(
  

    Hover to change color.
  
)

Sử dụng Cảm xúc để tạo kiểu cho các thành phần trong React

Cách tiếp cận tương tự đơn giản trong React

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/react'

const color = 'white'

render(
  

    Hover to change color.
  
)

Phần kết luận

Để tạo kiểu đơn giản, hiệu quả và không phức tạp, Emotion là một thư viện CSS-to-JS tuyệt vời. Mặt khác, đối với các tùy chọn kiểu dáng phức tạp và độc đáo hơn, các thành phần được tạo kiểu có thể là cách tốt hơn để thực hiện. Như thường xảy ra với việc viết CSS, phần lớn quá trình ra quyết định phụ thuộc vào thiết lập dự án và sở thích cá nhân

Đăng NhậpTên Lửa. Khả năng hiển thị đầy đủ vào các ứng dụng React sản xuất của bạn

Gỡ lỗi ứng dụng React có thể khó khăn, đặc biệt khi người dùng gặp sự cố khó tái tạo. Nếu bạn quan tâm đến việc giám sát và theo dõi trạng thái Redux, tự động hiển thị các lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, hãy thử LogRocket.

LogRocket kết hợp tính năng phát lại phiên, phân tích sản phẩm và theo dõi lỗi – trao quyền cho các nhóm phần mềm để tạo trải nghiệm sản phẩm di động và web lý tưởng. Điều đó có ý nghĩa gì đối với bạn?

Thay vì đoán tại sao xảy ra lỗi hoặc yêu cầu người dùng chụp ảnh màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của chính bạn để nhanh chóng hiểu điều gì đã xảy ra.

Không còn cảnh báo ồn ào. Theo dõi lỗi thông minh cho phép bạn phân loại và phân loại các vấn đề, sau đó học hỏi từ điều này. Nhận thông báo về các sự cố có ảnh hưởng đến người dùng, không phải thông báo sai. Ít cảnh báo hơn, nhiều tín hiệu hữu ích hơn

Gói phần mềm trung gian LogRocket Redux thêm một lớp khả năng hiển thị bổ sung vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn

'Phản ứng cảm xúc @ là gì?

Là cảm xúc và phong cách

Làm cách nào để tạo thành phần danh sách với Cảm xúc bằng CSS?

Cảm xúc được tạo kiểu trong MUI là gì?