SCSS có thể được sử dụng theo kiểu không

styled-components là kết quả của việc tự hỏi làm thế nào chúng ta có thể nâng cao CSS để tạo kiểu cho các hệ thống thành phần React. Bằng cách tập trung vào một trường hợp sử dụng duy nhất, chúng tôi đã quản lý để tối ưu hóa trải nghiệm cho nhà phát triển cũng như đầu ra cho người dùng cuối

Ngoài trải nghiệm được cải thiện cho các nhà phát triển, các thành phần theo kiểu cung cấp

• CSS quan trọng tự động. các thành phần được tạo kiểu theo dõi thành phần nào được hiển thị trên một trang và đưa vào các kiểu của chúng và không có gì khác, hoàn toàn tự động. Kết hợp với việc tách mã, điều này có nghĩa là người dùng của bạn tải ít mã nhất cần thiết
• Không có lỗi tên lớp. styled-components tạo tên lớp duy nhất cho kiểu của bạn. Bạn không bao giờ phải lo lắng về sự trùng lặp, trùng lặp hay sai chính tả
• Xóa CSS dễ dàng hơn. khó có thể biết liệu tên lớp có được sử dụng ở đâu đó trong cơ sở mã của bạn hay không. các thành phần được tạo kiểu làm cho nó trở nên rõ ràng, vì mọi kiểu dáng đều được gắn với một thành phần cụ thể. Nếu thành phần không được sử dụng (công cụ nào có thể phát hiện) và bị xóa, tất cả các kiểu của nó sẽ bị xóa cùng với nó
• Kiểu dáng đơn giản năng động. điều chỉnh kiểu dáng của một thành phần dựa trên các đạo cụ của nó hoặc một chủ đề toàn cầu rất đơn giản và trực quan mà không cần phải quản lý hàng chục lớp theo cách thủ công
• bảo trì không đau. bạn không bao giờ phải tìm kiếm các tệp khác nhau để tìm kiểu ảnh hưởng đến thành phần của mình, vì vậy việc bảo trì là một miếng bánh dễ dàng cho dù cơ sở mã của bạn lớn đến đâu
• Tiền tố nhà cung cấp tự động. viết CSS của bạn theo tiêu chuẩn hiện tại và để styled-components xử lý phần còn lại

Bạn nhận được tất cả những lợi ích này trong khi vẫn viết CSS mà bạn biết và yêu thích, chỉ bị ràng buộc với các thành phần riêng lẻ

Việc cài đặt các thành phần theo kiểu chỉ cần một lệnh duy nhất và bạn đã sẵn sàng để triển khai

npm install --save styled-components
yarn add styled-components
Nếu bạn sử dụng trình quản lý gói như sợi hỗ trợ gói "độ phân giải". json, chúng tôi cũng thực sự khuyên bạn nên thêm một mục vào đó cũng như tương ứng với phạm vi phiên bản chính. Điều này giúp tránh toàn bộ các vấn đề phát sinh từ nhiều phiên bản của các thành phần kiểu dáng được cài đặt trong dự án của bạn
trong gói. json
Ghi chú
Bạn cũng nên sử dụng (nhưng không bắt buộc). Nó cung cấp nhiều lợi ích như tên lớp dễ đọc hơn, khả năng tương thích hiển thị phía máy chủ, các gói nhỏ hơn, v.v.
Nhấp vào đây để xem hướng dẫn cài đặt CDN thay thế
Nếu bạn không sử dụng gói mô-đun hoặc trình quản lý gói, chúng tôi cũng có bản dựng toàn cầu ("UMD") được lưu trữ trên CDN unpkg. Chỉ cần thêm vào như sau
Khi bạn đã thêm các thành phần theo kiểu, bạn sẽ có quyền truy cập vào cửa sổ chung. kiểu biến
const Component = window.styled.div`
các thành phần được tạo kiểu sử dụng các ký tự mẫu được gắn thẻ để tạo kiểu cho các thành phần của bạn
Nó loại bỏ ánh xạ giữa các thành phần và kiểu. Điều này có nghĩa là khi bạn xác định kiểu của mình, bạn thực sự đang tạo một thành phần React bình thường, có kiểu của bạn được đính kèm với nó
Ví dụ này tạo hai thành phần đơn giản, trình bao bọc và tiêu đề, với một số kiểu được đính kèm với nó
const Wrapper = styled.section`
Đây là một trình chỉnh sửa trực tiếp, vì vậy hãy chơi xung quanh mã để có cảm giác về cách nó hoạt động với các thành phần theo kiểu
Ghi chú
Các quy tắc CSS được tự động thêm tiền tố vào nhà cung cấp, các thành phần được tạo kiểu sẽ đảm nhận việc đó cho bạn
Các thành phần được tạo kiểu sử dụng bút stylus. js dưới mui xe để thêm tiền tố vào các quy tắc css
Để biết thêm thông tin về các tiền tố được hỗ trợ trong stylis. js truy cập kho lưu trữ của họ
Bạn có thể chuyển một hàm ("nội suy") sang mẫu theo nghĩa đen của thành phần được tạo kiểu để điều chỉnh nó dựa trên các đạo cụ của nó
Thành phần nút này có trạng thái chính thay đổi màu sắc của nó. Khi đặt giá trị chính thành true, chúng tôi sẽ hoán đổi màu nền và màu văn bản của nó
const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  border: 2px solid palevioletred;
    Primary
Khá thường xuyên, bạn có thể muốn sử dụng một thành phần, nhưng thay đổi nó một chút cho một trường hợp duy nhất. Bây giờ, bạn có thể chuyển vào một hàm nội suy và thay đổi chúng dựa trên một số đạo cụ, nhưng đó là khá nhiều nỗ lực để ghi đè các kiểu một lần
Để dễ dàng tạo một thành phần mới kế thừa kiểu dáng của thành phần khác, chỉ cần bọc nó trong hàm tạo kiểu (). Ở đây, chúng tôi sử dụng nút từ phần trước và tạo một nút đặc biệt, mở rộng nó bằng một số kiểu dáng liên quan đến màu sắc



const Button = styled.button`
  border: 2px solid palevioletred;
const TomatoButton = styled(Button)`
    Normal Button
    Tomato Button
Nút bình thường Nút cà chua
Chúng ta có thể thấy rằng TomatoButton mới vẫn giống với Button, trong khi chúng ta chỉ thêm hai quy tắc mới
Trong một số trường hợp, bạn có thể muốn thay đổi thẻ hoặc thành phần mà thành phần được tạo kiểu hiển thị. Điều này phổ biến khi xây dựng một thanh điều hướng chẳng hạn, nơi có sự kết hợp của các liên kết neo và các nút nhưng chúng phải được tạo kiểu giống hệt nhau
Đối với tình huống này, chúng tôi có một lối thoát hiểm. Bạn có thể sử dụng để tự động hoán đổi phần tử nhận các kiểu bạn đã viết
const Button = styled.button`
  border: 2px solid palevioletred;
const TomatoButton = styled(Button)`
    Normal Button
    Link with Button styles
    Link with Tomato Button styles
Điều này cũng hoạt động hoàn toàn tốt với các thành phần tùy chỉnh
const Button = styled.button`
  border: 2px solid palevioletred;
const ReversedButton = props => 
    
Normal Button
    Custom Button with Normal Button styles
Bình thường Nút chắc chắn không phải ống lamroN htiw nottub motsuC
Ghi chú
Nếu bạn vẫn đang sử dụng phiên bản cũ hơn v4, bạn có thể sử dụng API hoặc để đạt được kết quả tương tự như với , nhưng lưu ý rằng điều này không được khuyến khích như với v4 và. withComponent đã được đánh dấu là một ứng cử viên cho việc ngừng sử dụng trong tương lai
Phương thức được tạo kiểu hoạt động hoàn hảo trên tất cả thành phần của riêng bạn hoặc bất kỳ thành phần bên thứ ba nào, miễn là chúng đính kèm className prop đã truyền vào thành phần DOM
Ghi chú
Nếu bạn đang sử dụng phản ứng gốc, hãy nhớ sử dụng kiểu thay vì className
const Link = ({ className, children }) => (
const StyledLink = styled(Link)`
    Unstyled, boring Link



    Styled, exciting Link
Ghi chú
Bạn cũng có thể chuyển tên thẻ vào lời gọi xuất xưởng styled(), như vậy. được tạo kiểu ("div"). Trên thực tế, phong cách. người trợ giúp tagname chỉ là bí danh làm điều tương tự
Nếu mục tiêu được tạo kiểu là một phần tử đơn giản (e. g. theo kiểu. div), các thành phần được tạo kiểu chuyển qua bất kỳ thuộc tính HTML đã biết nào tới DOM. Nếu nó là một thành phần React tùy chỉnh (e. g. styled(MyComponent)), styled-components đi qua tất cả các props
Ví dụ này cho thấy cách tất cả các đạo cụ của thành phần Đầu vào được chuyển đến nút DOM được gắn kết, như với các phần tử React
________số 8
Lưu ý cách giá trị inputColor không được chuyển đến DOM, nhưng loại và giá trị mặc định là. Đó là các thành phần được tạo kiểu đủ thông minh để tự động lọc các thuộc tính không chuẩn cho bạn
Nếu bạn đã quen với việc nhập CSS vào các thành phần của mình (e. g. như CSSModules), bạn sẽ quen với việc làm như thế này
import styles from './styles.css';
export default class Counter extends React.Component {
  increment = () => this.setState({ count: this.state.count + 1 });
  decrement = () => this.setState({ count: this.state.count - 1 });
      
        
{this.state.count}
        
        
Bởi vì Thành phần được tạo kiểu là sự kết hợp của phần tử và các quy tắc tạo kiểu cho nó, nên chúng tôi sẽ viết Bộ đếm như thế này
const Component = window.styled.div`
0
Lưu ý rằng chúng tôi đã thêm tiền tố "Đã tạo kiểu" vào StyledCounter để Bộ đếm thành phần React và Bộ đếm thành phần được tạo kiểu StyledCounter không xung đột tên nhưng vẫn có thể dễ dàng nhận dạng trong Công cụ dành cho nhà phát triển React và Trình kiểm tra web
Điều quan trọng là xác định các thành phần được tạo kiểu của bạn bên ngoài phương thức kết xuất, nếu không, nó sẽ được tạo lại trên mỗi lần kết xuất. Việc xác định một thành phần được tạo kiểu trong phương thức kết xuất sẽ cản trở bộ nhớ đệm và làm chậm đáng kể tốc độ kết xuất và nên tránh
Viết các thành phần theo kiểu của bạn theo cách được đề xuất
const Component = window.styled.div`
1
Thay vì
const Component = window.styled.div`
2
đề nghị đọc. Talia Marcassa đã viết một bài đánh giá tuyệt vời về cách sử dụng trong thế giới thực, bao gồm nhiều thông tin chi tiết và so sánh thực tế chắc chắn với các lựa chọn thay thế, trong Thành phần theo kiểu. Sử dụng hay không sử dụng?
Bộ tiền xử lý mà chúng tôi sử dụng, stylis, hỗ trợ cú pháp giống như scss để tự động lồng các kiểu
Thông qua quá trình tiền xử lý này, các thành phần kiểu dáng hỗ trợ một số mẫu bộ chọn nâng cao
& một ký hiệu duy nhất đề cập đến tất cả các phiên bản của thành phần; 
const Component = window.styled.div`
3
&& dấu và kép đề cập đến một thể hiện của thành phần; 
const Component = window.styled.div`



4
&& một mình dấu và kép có một hành vi đặc biệt được gọi là "tăng ưu tiên"; 
const Component = window.styled.div`
5
Tôi màu xanh, da ba dee da ba daa
Nếu bạn đặt bộ chọn mà không có dấu và, chúng sẽ tham chiếu đến phần tử con của thành phần
const Component = window.styled.div`
6
Để tránh các trình bao bọc không cần thiết chỉ truyền một số đạo cụ cho thành phần hoặc thành phần được kết xuất, bạn có thể sử dụng. Nó cho phép bạn đính kèm các đạo cụ bổ sung (hoặc "thuộc tính") vào một thành phần
Bằng cách này, chẳng hạn, bạn có thể đính kèm các đạo cụ tĩnh vào một phần tử hoặc chuyển một đạo cụ của bên thứ ba như activeClassName cho thành phần Liên kết của Bộ định tuyến React. Hơn nữa, bạn cũng có thể đính kèm các đạo cụ động hơn vào một thành phần. Các. đối tượng attrs cũng nhận các chức năng, nhận các đạo cụ mà thành phần nhận được. Giá trị trả về cũng sẽ được hợp nhất vào các đạo cụ kết quả
Ở đây chúng tôi kết xuất một thành phần Đầu vào và đính kèm một số thuộc tính động và tĩnh cho nó
const Component = window.styled.div`
7
Như bạn có thể thấy, chúng ta có quyền truy cập vào các đạo cụ mới được tạo trong phép nội suy và thuộc tính type được truyền xuống phần tử
Lưu ý rằng khi gói các thành phần được tạo kiểu,. attrs được áp dụng từ thành phần được tạo kiểu trong cùng đến thành phần được tạo kiểu ngoài cùng
Điều này cho phép mỗi trình bao bọc ghi đè các cách sử dụng lồng nhau của. attrs, tương tự như cách các thuộc tính css được xác định sau trong biểu định kiểu ghi đè lên các khai báo trước đó
đầu vào của. attrs được áp dụng trước, sau đó là PasswordInput's. attrs
const Component = window.styled.div`
8
Đây là lý do tại sao PasswordInput thuộc loại mật khẩu, nhưng vẫn sử dụng thuộc tính size từ Input
Hoạt ảnh CSS với @keyframes không nằm trong phạm vi một thành phần duy nhất nhưng bạn vẫn không muốn chúng có tính toàn cầu để tránh xung đột tên. Đây là lý do tại sao chúng tôi xuất một trình trợ giúp khung hình chính sẽ tạo ra một phiên bản duy nhất mà bạn có thể sử dụng trong ứng dụng của mình
const Component = window.styled.div`
9
Các khung hình chính được đưa vào một cách lười biếng khi chúng được sử dụng, đó là cách chúng có thể được phân tách mã, vì vậy bạn phải sử dụng cho các đoạn kiểu được chia sẻ
const Wrapper = styled.section`
0
Ghi chú
Điều này đã từng hoạt động trong v3 trở xuống, nơi chúng tôi không phân chia mã khung hình chính. Nếu bạn đang nâng cấp từ v3, hãy đảm bảo rằng tất cả các đoạn kiểu được chia sẻ của bạn đang sử dụng trình trợ giúp css
các thành phần được tạo kiểu có thể được sử dụng với React Native theo cùng một cách và với cùng một lần nhập. Hãy thử ví dụ này với Snack by Expo
const Wrapper = styled.section`
1
Chúng tôi cũng hỗ trợ các kiểu phức tạp hơn (như biến đổi), thường là một mảng và tốc ký (e. g. cho lề) nhờ css-to-Reac-native
Ghi chú
Lưu ý rằng thuộc tính flex hoạt động giống như tốc ký CSS chứ không phải thuộc tính flex kế thừa trong React Native. Cài đặt linh hoạt. 1 đặt flexShrink thành 1 ngoài việc đặt flexGrow thành 1 và flexBasis thành 0
Hãy tưởng tượng cách bạn viết thuộc tính trong React Native, hãy đoán xem bạn sẽ chuyển nó sang CSS như thế nào và có lẽ bạn đã đúng
const Wrapper = styled.section`
2
Một số điểm khác biệt đối với phiên bản web là bạn không thể sử dụng các khung hình chính và trình trợ giúp tạoGlobalStyle vì React Native không hỗ trợ các khung hình chính hoặc kiểu toàn cầu. Chúng tôi cũng sẽ cảnh báo bạn nếu bạn sử dụng truy vấn phương tiện hoặc lồng ghép CSS của mình
Ghi chú
Trong phiên bản 2, chúng tôi hỗ trợ tỷ lệ phần trăm. Để thực hiện điều này, chúng ta cần thực thi các đơn vị cho tất cả các tốc ký. Nếu bạn đang chuyển sang v2, thì có sẵn một codemod
Nếu bạn chỉ muốn nhập styled-components thay vì styled-components/native, bạn có thể thêm một thành phần bao gồm "reac-native". Điều này từng được hỗ trợ trong tàu điện ngầm theo mặc định (và hiện đang hoạt động trên đường) nhưng dường như đã bị xóa tại một số điểm
 

			
Các thành phần được tạo kiểu có sử dụng JSS không?
			
Thiết lập JSS tùy chỉnh
 . Bạn có thể yêu cầu hàm createStyled và cung cấp phiên bản JSS tùy chỉnh của mình. Styled-JSS uses jss-preset-default by default. You can require createStyled function and provide your custom JSS instance.
		
			
Các thành phần được tạo kiểu vẫn tốt chứ?
			
Các thành phần được tạo kiểu là một lựa chọn tốt để xây dựng thư viện giao diện người dùng vì mọi thứ có thể nằm trong một tệp và dễ dàng được xuất cũng như sử dụng lại . Nếu bạn thích viết CSS thuần túy, hãy sử dụng các mô-đun CSS. Bạn có thể có các tệp CSS riêng biệt và theo mặc định, nó có phạm vi kiểu cục bộ. 
		
			
Tại sao Sass tốt hơn các thành phần được tạo kiểu?
			
Kiểu 1. ngổ ngáo
 .  Sass là một cách viết CSS cải tiến, cung cấp cho nhà phát triển các công cụ mạnh mẽ như biến, mixin và lồng nhau, về cơ bản, nó giúp việc viết CSS trở nên đơn giản và hiệu quả hơn . 
		
			
Chúng ta có thể sử dụng lớp trong các thành phần được tạo kiểu không?
			
styled-components tạo một biểu định kiểu thực tế với các lớp  và gắn các lớp đó vào các nút DOM của các thành phần được tạo kiểu thông qua className prop.