GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 27/04/2020 | 00:00 GMT+7

Tạo kiểu phản ứng với cảm xúc

Ngoài ra, React cho phép bạn định kiểu các thành phần trực tiếp với thuộc tính style . Nó chấp nhận một đối tượng thuộc tính style và đối với hầu hết các trường hợp sử dụng, nó là quá đủ. Là một thuộc tính duy nhất, không có cách nào để chỉ định các mặc định chi tiết hơn và hỗ trợ cho !important là không tồn tại một style hiệu quả với thuộc tính style . May mắn là một chút emotion sẽ đi được một chặng đường dài!

👩‍🎤 cảm xúc là thư viện CSS-in-JS linh hoạt và có hiệu suất cao. Nó chấp nhận các chuỗi và đối tượng, hỗ trợ biến mặc định và mở rộng và với một plugin Babel bổ sung thậm chí còn hỗ trợ các bộ chọn con nội tuyến!

Bắt đầu

Để bắt đầu mọi thứ, ta cần cài đặt dependencies , emotion và emotion-react thông qua npm :

$ npm install --save emotion emotion-react

hoặc qua yarn :

$ yarn add emotion emotion-react

Đảm bảo bao gồm react-emotion trong mã nguồn thành phần của bạn:

import styled, { css } from "react-emotion";

Sử dụng

Với các phụ thuộc đã được cài đặt, hãy nói về các cách khác nhau mà bạn có thể tận dụng emotion để tạo kiểu cho các thành phần của bạn .

CSS

Cách nhanh nhất để bắt đầu và chạy theo emotion là chuyển css đến thuộc tính className của một phần tử hoặc thành phần.

css chấp nhận các kiểu như một chuỗi, một mẫu được gắn thẻ theo nghĩa đen, một đối tượng hoặc một mảng.

Dưới đây là một số ví dụ về css với một chuỗi và với một đối tượng:

<div className={css`background: #eee;`}>
  <div className={css({ padding: 10 })}>
    Hooray, styles!
  </div>
</div>

Tạo kiểu

Ngoài css bạn cũng có thể sử dụng styled để tạo một phần tử và tạo kiểu cho nó.

Tương tự như css , styled được dùng với một chuỗi, một mẫu được gắn thẻ theo nghĩa đen, một đối tượng của một mảng.

Khi bạn sử dụng styled để tạo phần tử, bạn có thể tạo phần tử mới với các thuộc tính sau đó được dùng trong kiểu của bạn. Điều này mở ra cánh cửa để dễ dàng tùy chỉnh và sử dụng lại:

const Heading = styled("h1")`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
`;

Điều này tạo thành phần Heading chấp nhận các thuộc tính bg và fg sẽ đặt màu nền và màu văn bản:

<Heading bg="#008f68" fg="#fae042">
  Heading with yellow text and a green background!
</Heading>

Tiến thêm một bước nữa, ta có thể sử dụng thành phần Heading và mở rộng nó, mang các thuộc tính màu nền và nền trước cùng với nó:

const Subheading = Heading.withComponent("h2");

Bản thân các thuộc tính không phải là bắt buộc, vì vậy bạn bao gồm / bỏ qua chúng khi bạn thấy phù hợp:

<Subheading fg="#6db65b">
  Subheading with default colors!
</Subheading>
<Subheading fg="#6db65b">
  Subheading with light green text!
</Subheading>
<Subheading bg="#6db65b">
  Subheading with light green background!
</Subheading>

Cũng giống như css , bạn có thể chỉ định kiểu của bạn dưới dạng một đối tượng thay vì dưới dạng chuỗi:

const Quote = styled("blockquote")(props => ({
  fontSize: props.size,
}));

Và thậm chí bao gồm một đối tượng của các kiểu mặc định:

const Cite = styled("cite")(
  {
    fontWeight: 100
  },
  props => ({
    fontWeight: props.weight
  })
);

Điều đó có thể được đặt tùy chọn khi sử dụng thành phần:

<Cite>
  Citation with light text!
</Cite>
<Cite weight={700}>
  Citation with heavy text!
</Cite>

Như đã đề cập trước đây, với emotion bạn có thể chỉ định các phong cách !important cách dễ dàng:

const Footer = styled("footer")`
  margin-top: 50px !important;
`;

Để tất cả chúng cùng nhau

Bây giờ ta đã xem qua một loạt các trường hợp sử dụng khác nhau, ta hãy bắt đầu và ghép chúng lại với nhau thành một ví dụ mount hơn:

import React from "react";
import { render } from "react-dom";
import styled, { css } from "react-emotion";

const Heading = styled("h1")`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
`;

const Subheading = Heading.withComponent("h2");

const Quote = styled("blockquote")(props => ({
  fontSize: props.size
}));

const Cite = styled("cite")(
  {
    fontWeight: 100
  },
  props => ({
    fontWeight: props.weight
  })
);

const Footer = styled("footer")`
  border-top: 1px solid #ccc;
  color: #ccc;
  margin-top: 50px !important;
  padding-top: 20px;
`;

function App() {
  return (
    <div className={css`background: #ddd;`}>
      <div className={css({ padding: 10 })}>
        <Heading bg="#008f68" fg="#fae042">
          Gator Lyrics
        </Heading>
        <Subheading fg="#6db65b">
          Lyrics from songs that contain the word "alligator"
        </Subheading>
        <Quote size={28}>
          See you later, alligator. After a while, crocodile.
        </Quote>
        <Cite weight={700}>Bill Haley</Cite>
        <Footer>EOF</Footer>
      </div>
    </div>
  );
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);

Đó là cách bạn có thể tạo kiểu theo emotion trong ứng dụng React của bạn !

Để xem ví dụ trực tiếp về đoạn mã ở trên, bạn có thể xem CodeSandbox này.

Thưởng thức!

Tags:

Các tin liên quan