Tạo kiểu cho ứng dụng React.js của bạn bằng cảm xúc
Tạo kiểu cho ứng dụng React có thể là một thách thức, đặc biệt nếu bạn muốn giữ cho các kiểu của mình được sắp xếp hợp lý và có thể bảo trì. Để giúp đơn giản hóa quá trình này, thư viện Emotion cung cấp một trừu tượng cấp cao hơn trên CSS.
Mục Lục
Cảm xúc là gì?
Emotion là một thư viện để tạo kiểu cho các ứng dụng React cung cấp một cách đơn giản và hiệu quả để quản lý các kiểu của bạn. Nó cho phép bạn viết CSS bằng JavaScript và cung cấp API linh hoạt để tạo kiểu cho các thành phần của bạn.
Một trong những lợi ích chính của việc sử dụng Cảm xúc để tạo kiểu cho ứng dụng React của bạn là nó cung cấp một cách hiệu quả hơn để quản lý các kiểu của bạn. Ví dụ: bạn có thể sử dụng các tên lớp giống hệt nhau trong nhiều thành phần mà không có nguy cơ xung đột tên phát sinh khi làm việc với CSS/SASS.
Thư viện Cảm xúc chỉ áp dụng các kiểu của bạn cho các thành phần sử dụng chúng thay vì toàn bộ trang. Điều này có thể giúp bạn tránh xung đột với các kiểu khác trên trang và làm cho mã của bạn trở nên mô đun hơn và có thể tái sử dụng.
Cách cài đặt cảm xúc
Để thêm thư viện Cảm xúc vào ứng dụng React của bạn, hãy chạy lệnh đầu cuối sau:
npm install --save @emotion/react
Thư viện Cảm xúc bây giờ sẽ được cài đặt trong dự án của bạn và sẵn sàng sử dụng để tạo kiểu cho ứng dụng React của bạn.
Tạo kiểu bằng css Prop của Emotion
Khi bạn đã cài đặt thư viện Cảm xúc, bạn sẽ có thể sử dụng css prop để tạo kiểu cho ứng dụng React của bạn. Các css prop tương tự như style prop vì bạn có thể truyền style cho nó dưới dạng chuỗi hoặc đối tượng JavaScript thông thường.
Để tạo kiểu cho ứng dụng của bạn bằng cách sử dụng css prop, bạn phải nhập nó từ @cảm xúc/phản ứng thư viện, sau đó xác định phong cách của bạn:
import React from 'react';
import {css} from '@emotion/react';function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
`}>
Click Me
</button>
)
}
export default App;
Dòng mã đầu tiên, /** @jsxImportSource @emotion/react */là một nhận xét cụ thể mà bạn nên thêm vào tệp JSX để chỉ ra rằng thư viện Cảm xúc nên được sử dụng làm thực dụng JSX cho tệp đó.
Trong JSX, pragma là một hàm chuyển đổi cú pháp JSX thành JavaScript thông thường. Theo mặc định, React sử dụng React.createElement hoạt động như JSX pragma. Tuy nhiên, với @jsxImportSource nhận xét, bạn có thể chỉ định một pragma khác.
Trong trường hợp này, các @cảm xúc/phản ứng pragma yêu cầu JSX sử dụng jsx chức năng từ thư viện Cảm xúc để chuyển đổi mã JSX. Bằng cách thêm nhận xét pragma vào tệp JSX, bạn có thể sử dụng các tính năng CSS-in-JS của thư viện Cảm xúc trong các thành phần của mình.
Thành phần nút hiển thị một nút với một số kiểu dáng tùy chỉnh. Ở đây, css prop thêm kiểu dáng tùy chỉnh vào phần tử nút.
Các css prop cũng hỗ trợ tạo kiểu lồng nhau. Kiểu lồng nhau cho phép bạn viết các kiểu được lồng vào nhau.
Ví dụ:
import React from 'react';
import {css} from '@emotion/react';function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover{
color: #e2e2e2;
background-color: #333333;
}
`}>
Click Me
</button>
)
}
export default App;
Trong ví dụ này, việc khai báo kiểu di chuột sử dụng tính năng tạo kiểu lồng nhau của css chống đỡ. Màu nền và phông chữ trong khối mã ở trên sẽ thay đổi bất cứ khi nào bạn di chuột qua nút.
Truyền các kiểu đối tượng cho css Prop
Các css prop cũng chấp nhận các kiểu đối tượng JavaScript thông thường. Khi tạo kiểu cho một số thành phần, việc sử dụng các kiểu đối tượng cho phép bạn sử dụng lại các kiểu trong các thành phần của mình.
Để chuyển các kiểu đối tượng cho css prop, xác định các kiểu dưới dạng đối tượng JavaScript và chuyển nó tới chỗ dựa:
const style = {
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem', '&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
}
return (
<div className="app">
<button css={ style }>Click Me</button>
</div>
);
Lưu ý rằng tên thuộc tính CSS là camelCased thay vì gạch nối. Điều này là do các kiểu được xác định là đối tượng JavaScript, sử dụng quy ước đặt tên camelCase.
Tạo kiểu bằng cách sử dụng các thành phần đã tạo kiểu
Thư viện Emotion cũng sử dụng các thành phần được tạo kiểu khi tạo kiểu cho các ứng dụng React. Việc sử dụng các thành phần được tạo kiểu tương tự như các thành phần React, ngoại trừ thực tế là chúng chứa các kiểu bên ngoài hộp. Để tạo các thành phần theo kiểu, bạn sẽ sử dụng theo kiểu chức năng.
Các theo kiểu chức năng cho phép bạn tạo các thành phần theo kiểu có thể tái sử dụng. Để sử dụng theo kiểu chức năng, nhập nó từ cảm xúc/phong cách thư viện.
Để có được @emotion/phong cách thư viện trong ứng dụng của bạn, bạn sẽ cài đặt nó vào dự án của mình. Bạn có thể thực hiện việc này bằng cách chạy lệnh sau trong thiết bị đầu cuối của dự án:
npm install @emotion/styled
Sau khi cài đặt @emotion/phong cách thư viện, nhập khẩu theo kiểu chức năng và xác định phong cách của bạn:
import styled from "@emotion/styled";const Button = styled.button({
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem',
'&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
})
export default Button;
Trong khối mã ở trên, một thành phần được tạo kiểu Cái nút được tạo ra. Bạn có thể sử dụng Nút này trong ứng dụng React của mình giống như bất kỳ thành phần React nào khác.
Như vậy:
import React from 'react';
import Button from './Button';function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
export default App;
kết xuất Ứng dụng thành phần sẽ hiển thị một nút với các kiểu được xác định trong Cái nút thành phần trên màn hình của bạn.
Các theo kiểu chức năng cũng chấp nhận kiểu chuỗi. Nó trông khác với cách tiếp cận kiểu đối tượng nhưng hoạt động tương tự.
import styled from "@emotion/styled";const Button = styled.button`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover {
color: #e2e2e2;
background-color: #333333;
}
`
export default Button;
Tạo kiểu hiệu quả với cảm xúc
Emotion là một thư viện mạnh mẽ để tạo kiểu cho các thành phần React, cung cấp một cách đơn giản và hiệu quả để quản lý kiểu của bạn. Cho dù bạn là người mới bắt đầu hay nhà phát triển có kinh nghiệm, Emotion có thể giúp đơn giản hóa quá trình tạo kiểu cho ứng dụng React của bạn và giúp bạn duy trì và mở rộng quy mô mã của mình dễ dàng hơn.
Vì vậy, nếu bạn đang tìm kiếm một cách hiệu quả và linh hoạt hơn để tạo kiểu cho các thành phần React của mình, hãy xem xét Emotion.