Đạo cụ vượt qua cảm xúc css

Đây là một bài đăng nhanh nhưng nói rằng tôi chia sẻ vì tôi nghĩ nó thực sự thú vị vì về cơ bản bạn có thể chuyển các đạo cụ thành phần vào phong cách của mình

Chúng tôi sẽ sử dụng hộp cát đáng tin cậy của riêng tôi mà tôi thường sử dụng, chúng tôi sẽ thay đổi hình nền bằng cách chuyển một hình ảnh chống đỡ cho thành phần

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

Vì vậy, hãy chọn một bức ảnh gợi cảm từ unsplash, hãy sử dụng bức ảnh này

Chúng tôi sẽ sử dụng cái này làm hình nền của chúng tôi, trong tệp

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

render() {
    return <Card image={'https://bit.ly/2JE7bwk'} handleClick={this.handleClick} />;
  }

Bây giờ, trong thành phần

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

Bây giờ, câu hỏi lớn là, làm thế nào để chúng ta đưa cái này vào thành phần được tạo kiểu của chúng ta khi có vẻ như chúng ta không thể chuyển các đạo cụ cho nó?

Thực ra nó khá đơn giản, chúng ta cần làm điều này, về cơ bản là sử dụng chức năng mũi tên để lấy đạo cụ của chúng ta.
______10

Vì vậy, trong trường hợp của chúng tôi, chúng tôi chỉ cần làm như sau

const Component = styled("card")`
  .card {
    background-image: url('${props => props.image}');

Và thế là xong. Tôi hoàn toàn thích tính năng này, giúp dễ dàng tạo các thành phần hoàn toàn khép kín

JSS xuất hiện như một câu trả lời dễ dàng cho CSS động và cung cấp các thuộc tính CSS dưới dạng thuộc tính vỏ lạc đà của riêng chúng. Mặc dù JSS yêu cầu người dùng CSS thay đổi một số thông lệ, nhưng nó hoạt động khá tốt. Cảm xúc đưa điều này đi xa hơn một chút cho phép tạo kiểu CSS thô, nhưng cũng cho phép bạn tạo các kiểu động. Hệ thống tạo kiểu và thành phần của Emotion tạo ra một giải pháp tạo kiểu cực kỳ nhẹ và cho phép bạn tạo kiểu trực tiếp cho các thành phần React. Hãy xem cách tạo kiểu trong Emotion JS và cách tạo một số thành phần trình bày thực sự nhẹ trong quy trình

Tôi tình cờ gặp Emotion khi tìm kiếm các giải pháp gọn nhẹ cho một mô-đun mới. Sử dụng Styled-Components hoặc Material-UI sẽ là quá mức cần thiết, nhưng sử dụng kiểu dáng React sẽ không mang lại sự linh hoạt cần thiết cho mô-đun. Cảm xúc chắc chắn là câu trả lời cho trường hợp sử dụng này và mang lại một bố cục độc đáo cho Hệ sinh thái kiểu dáng JavaScript

Tạo kiểu với Emotion JS

Emotion cung cấp một vài gói khác nhau dựa trên trường hợp sử dụng của họ. Gói cơ bản nhất là mô-đun @emotion/css, có thể được sử dụng để xử lý các kiểu css động bằng cách sử dụng Chuỗi tạo kiểu CSS. Các chuỗi này sau đó được chuyển đến các thành phần để áp dụng các kiểu

Một điều tuyệt vời về mô-đun CSS của Emotion là nó cung cấp một cách thống nhất để tạo kiểu bất kể bạn sử dụng Emotion như thế nào. Tạo kiểu bằng thao tác JavaScript DOM hoạt động giống như tạo kiểu trong React. Sự khác biệt là cách phong cách được chuyển đến thành phần. Đây là một ví dụ về mỗi

import { css } from '@emotion/css'

const element = document.findElementById('app')
const styles = {
  color: css`
    color: blue;
  `
}

element.classList.add(styles.color)

Với React, có một số cách để thêm kiểu. Cách dễ nhất là sử dụng các chuỗi tạo kiểu css với phần tử className

import { css } from '@emotion/css'

const divStyle = css`
  background-color: white;
  &:hover {
    color: ${props.color};
  }
`

render(
  

    This text has a white background
  
)

Bạn có thể thấy rằng chúng tôi sử dụng CSS trong một chuỗi mẫu, cho phép chúng tôi dễ dàng thêm các giá trị động

Tạo kiểu cảm xúc với React CSS Prop

Tùy chọn khác cho React phụ thuộc vào việc thay thế createElement của React bằng hàm jsx của chính Emotion. Chức năng này sẽ tạo các phần tử mới với css prop, giúp bổ sung thêm nhiều chức năng để tạo kiểu. Tùy thuộc vào phiên bản React của bạn, bạn có thể cần sử dụng pragma hoặc cập nhật cấu hình babel của mình để hỗ trợ tự động. Bạn có thể đọc thêm về các cách khác nhau để thêm hỗ trợ trong tài liệu hỗ trợ css

Với CSS prop, chúng ta có thể chuyển các kiểu của mình cho bất kỳ thành phần React nào

import { css } from "@emotion/react";

const NewButton = ({ text }) => {
  const buttonStyle = css`
    border: 1px solid black;
    padding: 6px 10px;
    margin: 6px 10px;
    border-radius: 4px;
  `;

  return (
    
      {text}
    
  );
};

export default NewButton;

Chúng ta lại sử dụng Styling Strings, nhưng thay vào đó chúng ta cũng có thể sử dụng các đối tượng style với JSS

/** @jsxImportSource @emotion/react */
import { css, jsx } from "@emotion/react";

const NewButton = ({ concatstyle, text }) => {
  const buttonStyle = {
    backgroundColor: "blue",
    color: "white",
    border: "1px solid black",
    padding: 10,
    margin: 4,
    borderRadius: 20
  };

  return (
    
      {text}
    
  );
};

export default NewButton;

Phong cách lập trình trong cảm xúc

Nếu chúng ta muốn tạo các thành phần động thực sự, hãy xem cách tạo động các thành phần có kiểu. Sử dụng chức năng JSX của Emotion, chúng ta có thể tạo các thành phần mới theo cách thủ công với css prop của mình

Với mẫu đơn giản này, chúng ta có thể tạo bất kỳ thành phần nào một cách linh hoạt, chuyển cho nó bất kỳ kiểu có thể phân tích cú pháp css nào và các thành phần con của nó. Chúng tôi sẽ không sử dụng thành phần cụ thể này, nhưng hãy tạo một thành phần nút theo cách tương tự

import { css, jsx } from "@emotion/react";

const Button = ({ concatstyle, text }) => {
  return jsx("div", {
    css: [
      css`
        border: 1px solid black;
        padding: 6px 10px;
        margin: 6px 10px;
        border-radius: 4px;
      `,
      concatstyle
    ],
    children: text
  });
};

export default Button;

Vì vậy, chúng tôi đã tạo một thành phần nút tương tự có một vài thuộc tính khác nhau. Ngoài các đối tượng và Chuỗi tạo kiểu, css prop cũng có thể lấy một mảng các chuỗi. Vì vậy, chúng tôi sử dụng thuộc tính concatstyle, thuộc tính này sẽ nối thêm một kiểu bổ sung vào kiểu hiện có

Thành phần JS cảm xúc

Lấy ví dụ trên ở mức độ cao hơn, hãy xem cách chúng ta có thể tạo một thành phần áp dụng các kiểu cho tất cả các thành phần con của nó. Bạn có thể tìm thấy một ví dụ hoạt động trong dự án Codesandbox này

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

Thành phần trên lấy bất kỳ kiểu nào được truyền cho thành phần và áp dụng nó cho tất cả các thành phần con. Trong ví dụ sau, chúng tôi áp dụng màu cho hai nhóm thành phần và áp dụng các kiểu bổ sung cho một nhóm lồng nhau

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

Bằng cách đi sâu vào ví dụ của chúng tôi, chúng tôi có thể thấy cách chúng tôi áp dụng các kiểu cho con của mình và áp dụng các kiểu bổ sung cho 3 nút lồng nhau. Với kiểu bố cục này, chúng ta có thể thấy sức mạnh của hệ thống tạo kiểu của Emotion. Nếu chúng ta xem ví dụ về cây DOM, chúng ta sẽ thấy rằng chúng ta đang tạo ra một số lượng phần tử tối thiểu. Đối với những người sử dụng styled-components hoặc Material-UI, đây là sự giảm mạnh các phần tử trên DOM

Ảnh động CSS với Emotion JS

Giống như kiểu dáng, Emotion giúp dễ dàng tạo bố cục xung quanh hoạt ảnh CSS. Một phần lớn của chức năng này đến từ chức năng khung hình chính có sẵn trong Cảm xúc. Với chức năng này, chúng ta có thể tạo các khung hình chính CSS của mình và đặt chúng vào một biến. Giống như phong cách của chúng tôi, chúng tôi có thể chuyển hoạt ảnh của mình thông qua các đạo cụ và áp dụng chúng vào phong cách của chúng tôi. Dưới đây là ví dụ nhanh về hiệu ứng thoát được áp dụng cho kiểu dáng CSS của Emotion

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

Vì chúng tôi có thể tách các khung hình chính khỏi phong cách của mình nên chúng tôi có thể chia sẻ hoạt ảnh của mình. Tôi đã tạo một đối tượng riêng để lưu trữ và chia sẻ các khung hình chính của mình cho tất cả các phần tử

const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....

Bây giờ tôi có thể nhập đối tượng Hoạt ảnh của mình và sử dụng nó để áp dụng hoạt ảnh cho phần ghi đè kiểu

import { css } from '@emotion/css'

const divStyle = css`
  background-color: white;
  &:hover {
    color: ${props.color};
  }
`

render(
  

    This text has a white background
  
)

Bằng cách thêm những thứ này, chúng ta sẽ có hai nhóm hoạt ảnh riêng biệt nơi hoạt ảnh được áp dụng cho trẻ em

Phần kết luận

Cách bạn xử lý kiểu dáng với Cảm xúc cực kỳ linh hoạt và có lẽ rõ ràng là cách nó được xây dựng riêng cho bố cục. Mặc dù đây không phải là mức độ khả năng của nó, nhưng nó sẽ cho bạn ý tưởng tốt về lợi ích của nó và cách sử dụng nó để tạo kiểu. Nếu bạn muốn tìm hiểu thêm về cách thức hoạt động của Cảm xúc với MUI v5, hãy nhớ xem MUI v5 với Cảm xúc

Nếu bạn có bất kỳ câu hỏi nào, hoặc muốn biết thêm về chủ đề này, vui lòng cho tôi biết trong phần bình luận. Cho đến lần sau, mã hóa vui vẻ

Emotion có sử dụng theo kiểu không

CSS Cảm xúc hoạt động như thế nào?

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

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