Cảm xúc/css

import styled from 'styled-components' const Button = styled.button` 
  background: #08e; 
  color: white; 
  padding: 6px 10px; 
  border: none;
` function Example() { 
 return ( 
  
  
    Hello world  
  
 
 ) 
}

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
    

Ngược lại, với Emotion, chúng ta có thể thêm các kiểu vào một phần tử bằng cách sử dụng giá đỡ

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

Thoạt nhìn, ví dụ về styled-component có vẻ thanh lịch hơn. Nhưng tôi nhận thấy rằng về lâu dài, tôi thường thích api kiểu

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

Bạn vẫn đang viết các React component thông thường

Đặc biệt khi làm việc với TypeScript, tôi thấy điều này có lợi. Bạn nhập một thành phần

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

Các kiểu đối tượng dễ làm việc hơn

Khi làm việc với TypeScript, tôi thích rằng tất cả css của tôi đều được kiểm tra kiểu và cung cấp tính năng tự động hoàn thành mạnh mẽ. Và tôi thường thấy việc chèn các biến chủ đề vào các đối tượng dễ dàng hơn thay vì sử dụng ký hiệu kiểu

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

Đặt tên cho mọi thứ thật khó. Và tôi lười biếng

Khi làm việc với các thành phần có kiểu dáng, bạn thường cần tạo tên cho các thành phần có kiểu riêng biệt. Điều này dẫn đến nhiều thành phần thiếu tầm quan trọng ngữ nghĩa rõ ràng mà vẫn yêu cầu các tên riêng biệt. Đặt tên cho các thành phần này với một bộ mô tả có ý nghĩa có thể khó khăn. Hơn nữa, bản soạn sẵn thường cảm thấy nặng nề khi áp dụng các kiểu tùy chỉnh nhỏ, chẳng hạn như thay đổi lề hoặc phần đệm. Vì vậy, vì lười biếng, tôi thấy mình thường sử dụng giá đỡ

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

Nhưng việc sử dụng

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

function Example() { 
  return ( 
    
      margin: theme.spacing.sm, 
      padding: theme.spacing.sm, 
     }}
    > 
     Hi there 
    
 
  ) 
}

Bạn sắp xếp các kiểu với các phần tử

Với sự hỗ trợ của

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

Bố cục thật dễ dàng

Xem xét thành phần

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

function Example() { 
  return ( 
    <>  
      Cancel 
      Save  
     
  ) 
}

Thao tác này chuyển các kiểu được xác định trong ví dụ của chúng ta sang phần tử

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}

Cả hai đều tuyệt vời, nhưng tôi chọn Cảm xúc

Styled-components là một công cụ tuyệt vời và kết hợp với thứ gì đó như styled-system, bạn có thể nhận được những lợi ích của CSS kiểu chức năng có thể làm giảm bớt một số vấn đề về đặt tên. Nhưng tôi nhận thấy rằng việc sử dụng prop

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
      Hello world    
     
  ) 
}