5 cách viết kiểu CSS trong React – xác định css trong thành phần phản ứng

Có nhiều cách để tạo kiểu cho các thành phần React của bạn. 🤓

Trong hướng dẫn này, chúng tôi sẽ trình bày các cách tạo kiểu cho các thành phần React. Chúng tôi sẽ chỉ cho bạn 5 cách khác nhau và bạn sẽ quyết định cách nào bạn thích nhất! 😁

Tạo kiểu cho thành phần của bạn theo cách của bạn

Đây là những cách tạo kiểu thành phần mà chúng ta sẽ thảo luận:

Chúng tôi sẽ thay thế các kiểu giống nhau bên dưới bằng các cách tạo kiểu thành phần khác nhau.

 

. nút 
 
 {
  
 color 
 
: 
 # 494949 
; 
  
 text-biến đổi 
 
: 
 chữ hoa 
; 
  
 text-decoration 
 
: 
 none 
; 
  
 background 
 
: 
 #ffffff 
; 
  
 padding 
 
: 
 20px 
; 
  
 font-size 
 
: 
 20px 
; 
  
 border 
 
: 
 4px solid # 494949 
; 
  
 display 
 
: 
 inline-block 
; 
  
 chuyển đổi 
 
: 
 tất cả 0,4 giây dễ dàng 0 giây 
; 
} 

. button: hover 
 
 {
  
 color 
 
: 
 #ffffff 
; 
  
 background 
 
: 
 # f6b93b 
; 
  
 border-color 
 
: 
 # f6b93b 
; 
  
 chuyển đổi 
 
: 
 tất cả 0,4 giây dễ dàng 0 giây 
; 
} 

. button - chính 
 
 {
  
 color 
 
: 
 #ffffff 
; 
  
 text-biến đổi 
 
: 
 chữ hoa 
; 
  
 text-decoration 
 
: 
 none 
; 
  
 background 
 
: 
 # f6b93b 
; 
  
 padding 
 
: 
 20px 
; 
  
 font-size 
 
: 
 20px 
; 
  
 border 
 
: 
 4px solid # f6b93b 
; 
  
 display 
 
: 
 inline-block 
; 
  
 chuyển đổi 
 
: 
 tất cả 0,4 giây dễ dàng 0 giây 
; 
} 

. button - primary: hover 
 
 {
  
 color 
 
: 
 # 494949 
; 
  
 background 
 
: 
 #ffffff 
; 
  
 border-color 
 
: 
 # 494949 
; 
  
 chuyển đổi 
 
: 
 tất cả 0,4 giây dễ dàng 0 giây 
; 
} 
  

CSS thông thường

Đây là cách dễ dàng và đơn giản nhất để thêm các kiểu vào một thành phần React.

  
 nhập 
 React 
 từ 
 < p class = "chuỗi mã thông báo"> 'phản ứng' 
 
; 
 nhập 
 
 './ BeautifulButton.css' 
; 

 const 
 
 MyBeautifulButton 
 
 = 
 
 đạo cụ 
 
 = & gt; 
 
 {
  
 trả về 
 
 (
    
 & lt; 
 div 
 & gt; 
      
 & lt; 
 button className 
 = 
 
 {
 props 
. 
 chính 
? 
 
 'nút - chính' 
 
: 
 
 'nút' 
 
} 
 
 & gt; < / p>
        Cái nút
      Nút 
 & lt; 
 
 / 
 
 & gt; 
    
 & lt; 
 
 / 
 div 
 & gt; 
  
) 
 
; 
} 
 
; 

 xuất 
 
 mặc định 
 MyBeautifulButton 
; 
  
 Tạo kiểu nội tuyến 
  
 nhập 
 React 
 từ 
 < p class = "chuỗi mã thông báo"> 'phản ứng' 
 
; 

 const 
 
 MyBeautifulButton 
 
 = 
 
 đạo cụ 
 
 = & gt; 
 
 {
  
 const 
 button 
 = 
 
 {
    color 
: 
 
 '# 494949' 
 
, 
    textTransform 
: 
 
 'chữ hoa' 
 
, 
    textDecoration 
: 
 
 'không có' 
 
, 
    background 
: 
 
 '# ffffff' 
 
, 
    padding 
: 
 
 '20px' 
 
, 
    fontSize 
: 
 
 '20px' 
 
, 
    biên giới 
: 
 
 '4px solid # 494949' 
 
, 
    hiển thị 
: 
 
 'inline-block' 
 
, 
    chuyển đổi 
: 
 
 'hết 0,4 giây dễ dàng 0 giây' 
  
} 
 
; 

  
 const 
 primaryButton 
 = 
 
 {
    
 ... 
 nút 
, 
    color 
: 
 
 '# ffffff' 
 
, 
    background 
: 
 
 '# f6b93b' 
 
, 
    borderColor 
: 
 
 '# f6b93b' 
  
} 
 
; 

  
 trả về 
 
 (
    
 & lt; 
 div 
 & gt; 
      
 & lt; 
 button style 
 = 
 
 {
 props 
. 
 primary 
? 
 primaryButton 
: 
 nút 
 } 
 
 & gt; 
 Nút 
 & lt; 
 
 / 
 nút 
 & gt; 
    
 & lt; 
 
 / 
 div 
 & gt; 
  
) 
 
; 
} 
 
; 

 xuất 
 
 mặc định 
 MyBeautifulButton 
; 
  

  Lưu ý:  Hộp đựng lạc đà là cần thiết để tạo kiểu nội tuyến hoạt động! Ví dụ:  borderColor . 

 Đây là cách đơn giản và dễ hiểu nhất để thêm kiểu vào một thành phần React. 
 
 Tạo kiểu nội tuyến rất đơn giản và hoạt động hiệu quả nhưng có nhiều hạn chế. 
 Ví dụ: không có cách nhíu mày thẳng để thêm  hiệu ứng di chuột . 

  Đề xuất:  Chỉ sử dụng mô hình tạo kiểu nội tuyến với các thành phần đơn giản nhỏ. 😇 

 Mô-đun CSS 
  
 nhập 
 React 
 từ 
 < p class = "chuỗi mã thông báo"> 'phản ứng' 
 
; 

 nhập 
 styles 
 từ 
 
 './ my-beautiful-button.module.css '
 
; 
 

 const 
 
 MyBeautifulButton 
 
 = 
 
 đạo cụ 
 
 = & gt; 
 
 {
  
 trả về 
 
 (
    
 & lt; 
 div 
 & gt; 
      Nút 
 & lt; 
        className 
 = 
 
 {
 đạo cụ 
. 
 chính 
? 
 styles 
 [
 
 'nút - chính' 
 
] 
 
: 
 styles 
. 
 nút 
} 
      
 & gt; 
        Cái nút
      Nút 
 & lt; 
 
 / 
 
 & gt; 
    
 & lt; 
 
 / 
 div 
 & gt; 
  
) 
 
; 
} 
 
; 

 xuất 
 
 mặc định 
 MyBeautifulButton 
; 
  
 Tất cả các kiểu từ một mô-đun CSS có phạm vi trong thành phần đã nhập nó. Điều đó có nghĩa là bạn không phải lo lắng về xung đột tên toàn cầu. 😌 

  Lưu ý:  Bạn phải bao gồm phần mở rộng phụ .module trong tên. Nếu không, các kiểu sẽ tải như CSS thông thường và bạn có thể có xung đột tên. 

 Tiền xử lý 
 Sử dụng các bộ tiền xử lý như  SCSS ,  LESS  hoặc < span rel = "nofollow noopener noreferrer" target = "_ blank"> Stylus  được sử dụng thẳng trong React. 
 Bạn cần thêm trình tải tiền xử lý và sau đó theo cách giống như CSS thông thường, bạn có thể nhập tệp. 
  
 nhập 
 React 
 từ 
 < p class = "chuỗi mã thông báo"> 'phản ứng' 
 
; 
 nhập 
 
 './ button.scss' 
 
; 

 const 
 
 MyBeautifulButton 
 
 = 
 
 đạo cụ 
 
 = & gt; 
 
 {
  
 trả về 
 
 (
    
 & lt; 
 div 
 & gt; 
      
 & lt; 
 button className 
 = 
 
 {
 props 
. 
 chính 
? 
 
 'nút - chính' 
 
: 
 
 'nút' 
 
} 
 
 & gt; < / p>
        Cái nút
      Nút 
 & lt; 
 
 / 
 
 & gt; 
    
 & lt; 
 
 / 
 div 
 & gt; 
  
) 
 
; 
} 
 
; 

 xuất 
 
 mặc định 
 MyBeautifulButton 
; 
  
 CSS trong JS 
 CSS trong JS là một mẫu mà bạn sẽ xác định tất cả các kiểu của mình bên trong thành phần. Giống như tạo kiểu nội tuyến nhưng mạnh mẽ hơn rất nhiều. 
 Hãy xem cách chúng ta sẽ viết các kiểu nút giống nhau bằng cách sử dụng  Thành phần được tạo kiểu  và  Cảm xúc . 
  
 
  Các thành phần được tạo kiểu 
  
 nhập
 Phản ứng 
 từ 
 
 'phản ứng' 
 
; 

 nhập 
 theo kiểu 
 từ 
 
 'styled-components' 
 
; 

 const 
 
 MyBeautifulButton 
 
 = 
 
 đạo cụ 
 
 = & gt; 
 
 {
  
 const 
 BeautifulButton 
 = 
 theo kiểu 
. 
 nút 
 
` 
 

    màu: # 494949;
    text-biến đổi: chữ hoa;
    văn bản-trang trí: không có;
    nền: #ffffff;
    đệm: 20px;
    font-size: 20px;
    viền: 4px solid # 49499;
    display: inline-block;
    chuyển tiếp: tất cả 0,4s dễ dàng 0s;
    & amp;: di chuột vào {
      màu: #ffffff;
      nền: # f6b93b;
      màu viền: # f6b93b;
      chuyển tiếp: tất cả 0,4s dễ dàng 0s;
    }
  
 
 `
 
 
; 

  
 const 
 BeautifulPrimaryButton 
 = 
 
 theo kiểu 
 
 (
 Nút 
) 
 
 
` 
 

    màu: #ffffff;
    nền: # f6b93b;
    màu viền: # f6b93b;
    & amp;: di chuột vào {
      màu: # 494949;
      nền: #ffffff;
      màu viền: # 49499;
    }
  
 
 `
 
 
; 

  
 trả về 
 
 (
    
 & lt; 
 div 
 & gt; 
      
 {
 props 
. 
 primary 
? 
 
 (
        
 & lt; 
 BeautifulPrimaryButton 
 & gt; 
 Nút 
 & lt; 
 
 / 
 BeautifulPrimaryButton 
 & gt; 
      
) 
 
: 
 
 (
        
 & lt; 
 BeautifulButton 
 & gt; 
 Nút 
 & lt; 
 
 / 
 BeautifulButton 
 & gt; 
      
) 
 
} 
    
 & lt; 
 
 / 
 div 
 & gt; 
  
) 
 
; 
} 
 
; 

 xuất 
 
 mặc định 
 MyBeautifulButton 
; 
  
  
 
  Cảm xúc 
 Cảm xúc có hai cách để thêm kiểu, API css và API kiểu. 
 Dưới đây là một ví dụ về cách sử dụng API css trông như thế nào: 
 
 
 nhập 
 React 
 từ 
 
 'react' 
 
; 
 nhập 
 
 {
 jsx 
, 
 css 
} 
 
 từ 
 
 '@ feel / core' 
 
 ; 

 const 
 BeautifulButton 
 = 
 css 
 
` 
 

  màu: # 494949;
  text-biến đổi: chữ hoa;
  văn bản-trang trí: không có;
  nền: #ffffff;
  đệm: 20px;
  font-size: 20px;
  viền: 4px solid # 49499;
  display: inline-block;
  chuyển tiếp: tất cả 0,4s dễ dàng 0s;
  & amp;: di chuột vào {
    màu: #ffffff;
    nền: # f6b93b;
    màu viền: # f6b93b;
    chuyển tiếp: tất cả 0,4s dễ dàng 0s;
  }
 
 `
 
 
; 

 const 
 BeautifulPrimaryButton 
 = 
 css 
 
` 
 

  
 
 
 $ {
 Nút 
} 
 < / p> 
;
  màu: #ffffff;
  nền: # f6b93b;
  màu viền: # f6b93b;
  & amp;: di chuột vào {
    màu: # 49499;
    nền: #ffffff;
    màu viền: # 49499;
  }
 `
 
 
; 

 const 
 
 MyBeautifulButton 
 
 = 
 
 đạo cụ 
 
 = & gt; 
 
 {
  
 trả về 
 
 (
    
 & lt; 
 div 
 & gt; 
      
 & lt; 
 button css 
 = 
 
 {
 "dấu câu mã thông báo">. 
 primary 
? 
 BeautifulPrimaryButton 
: 
 BeautifulButton 
 } 
 
 & gt; 
 Nút 
 & lt; 
 
 / 
 nút 
 & gt; 
    
 & lt; 
 
 / 
 div 
 & gt; 
  
) 
 
; 
} 
 
; 

 xuất 
 
 mặc định 
 MyBeautifulButton 
; 
  
 API được tạo kiểu của Emotion rất giống với các Thành phần được tạo kiểu. Đây là một ví dụ: 
 
 
 nhập 
 React 
 từ 
 
 'react' 
 
; 
 nhập 
 
 {
 jsx 
, 
 css 
} 
 
 từ 
 
 '@ feel / core' 
 
 ; 

 nhập 
 theo kiểu 
 từ 
 
 '@ feel / styled' 
 
; 

 const 
 BeautifulButton 
 = 
 theo kiểu 
. 
 nút 
 
` 
 

màu: # 49499;
text-biến đổi: chữ hoa;
văn bản-trang trí: không có;
nền: #ffffff;
đệm: 20px;
font-size: 20px;
viền: 4px solid # 49499;
display: inline-block;
chuyển tiếp: tất cả 0,4s dễ dàng 0s;
& amp;: di chuột vào {
  màu: #ffffff;
  nền: # f6b93b;
  màu viền: # f6b93b;
  chuyển tiếp: tất cả 0,4s dễ dàng 0s;
}
 
 `
 


 const 
 BeautifulPrimaryButton 
 = 
 
 theo kiểu 
 
 (
 BeautifulButton 
) 
 
 
` 
 

màu: #ffffff;
nền: # f6b93b;
màu viền: # f6b93b;
& amp;: di chuột vào {
  màu: # 49499;
  nền: #ffffff;
  màu viền: # 49499;
}
 
 `
 


 const 
 
 MyBeautifulButton 
 
 = 
 
 (
 
 đạo cụ 
 
) 
 
 = & gt; < / p> 
 {
  
 trả về 
 
 (
    
 & lt; 
 div 
 & gt; 
      
 {
 props 
. 
 primary 
? 
 
 & lt; 
 BeautifulPrimaryButton 
 & gt; 
 Nút 
 & lt; 
 
 / 
 BeautifulPrimaryButton 
 & gt; 
 
: 
 
 & lt; 
 BeautifulButton 
 & gt; 
 Nút 
 & lt; 
 
 / 
 BeautifulButton 
 & gt; 
 
} 
    
 & lt; 
 
 / 
 div 
 & gt; 
  
) 
 
; 
} 
 
; 

 xuất 
 
 mặc định 
 MyBeautifulButton 
; 
  

 Lưu ý: Bạn có thể thêm  plugin babel  để tránh ghi dòng trên cùng của tệp bắt buộc. 
   

 CSS trong JS là một mẫu mạnh mẽ. Nó giúp mọi thứ dễ dàng hơn rất nhiều khi xây dựng các ứng dụng web phức tạp lớn. 
 Có một điểm khác biệt chính giữa Thành phần được tạo kiểu và Cảm xúc. 
 Thành phần được tạo kiểu chỉ cung cấp API được tạo kiểu. Tuy nhiên, Emotion cung cấp hai cách để thêm các kiểu: API  css  và  các API được tạo kiểu . 

 Đề xuất: Đối với các ứng dụng lớn, chúng tôi khuyên bạn nên sử dụng Cảm xúc. 👌 

 Dưới đây là các CSS khác trong thư viện JS đáng xem: 
 Giờ bạn đã biết các tùy chọn của mình khi nói đến các thành phần tạo kiểu! Bạn thích cái nào hơn? 🤔