Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js
Show Đã đăng vào thg 2 22, 2018 3:14 SA 2 phút đọc 2 phút đọc CSS StylesheetĐơn giản là bạn chỉ cần import file CSS vào component bạn muốn style. Ví dụ ta có file DottedBox.css như sauDottedBox.css như sau
Để dùng CSS này style cho component DottedBox, ta import file này vào component DottedBox.DottedBox, ta import file này vào component DottedBox.
Inline stylingVới React, inline style không được thể hiện bằng một string mà bằng một object. Ví dụ component Box:Box:
Ta có thể tạo biến để lưu những style object này và truyền vào element bằng style={tenBien} hoặc ta có thể style trực tiếp element ví dụ style={{color: 'pink'}}.style={tenBien} hoặc ta có thể style trực tiếp element ví dụ style={{color: 'pink'}}. CSS ModulesVới việc dùng CSS Module tên class và animation được giới hạn để chỉ apply cho riêng một component. Ví dụ file DashedBox.css:DashedBox.css:
:local(.tenClass) khi dùng với create-react-app và .tenClass khi không dùng với create-react-app. Ta import file CSS vào component và access tên class trong file CSS giống như ta access một object vậy. khi dùng với create-react-app và .tenClass khi không dùng với create-react-app. Ta import file CSS vào component và access tên class trong file CSS giống như ta access một object vậy.
Như ở trên apply style của class container cho một div với . Tên của class trong file CSS sẽ tự động trở thành tên class của element mà nó style. Ta cũng cần cấu hình Webpack để CSS module hoạt động.. Tên của class trong file CSS sẽ tự động trở thành tên class của element mà nó style. Ta cũng cần cấu hình Webpack để CSS module hoạt động.
Kết quả có được sau khi build là tên class của CSS và element đều là duy nhất với hash code đi kèm. HTML CSS
Styled-componentsStyled-components là một thư viện dành cho React và React Native giúp cho việc viết style CSS ngay trong một component. Xét component FormWrapper sau:FormWrapper sau:
Kết quả sau khi build ta cũng được html và CSS với tên class là duy nhất. HTML
CSS 0Styled-components là một thư viện dành cho React và React Native giúp cho việc viết style CSS ngay trong một component.Xét component FormWrapper sau: Đầu tiên ta cần cài đặt style-component npm install styled-components --save hoặc yarn add styled-components Import Styled-components vào component import styled from 'styled-components' JSX mang đến cho chúng ta sự tiện lợi khi kết hợp cú pháp HTML và JavaScript trong một file trong React. và Nó cũng cho phép chúng ta viết mã CSS ben trong tệp React JSX của bạn. Tuy nhiên, có 1 số nhược điểm khi bạn cố gắng Debug các component theo style của bạn. Trong bài viết này mình sẽ giới thiệu 1 số cách style component dể việc debug dễ dàng hơn. (go) Bắt đầuĐầu tiên chúng ta hãy xây dựng 1 component như sau : 1và 1 file CSS 2sau đó ta thu được kết quả như sau : Okay . giờ mình muốn làm cho tile APeach Baby Doll có màu khác thì phải làm như thế nào ?APeach Baby Doll có màu khác thì phải làm như thế nào ? Chúng sẽ truyền cho Content.jsx 1 props và đặt tên là skyblue 3Bây giờ , chúng ta có thể thay đổi các thuộc tính CSS của Content.jsx dựa trên skyblue . Mình sẽ giới thiệu cho các bạn 2 phương pháp thêm các thuộc tính CSS mới thông qua CSS chung Inline Style 4Như bạn có thể thấy , mình lấy skyblue như một điều kiện để thêm các thuộc tính CSS vào đối tượng .Sau đó chúng ta inject đối tượng kiểu như một kiểu inline style. Bây giờ kết quả sẽ như thế này. Màu của tiêu đề bây giờ là màu xanh da trời như yêu cầu . Bây giờ chúng ta sẽ chuyển qua cách thứ 2. Thêm các Class CSS mới 5Mình đã tạo một lớp CSS được gọi là content--skyblue. Điều này là đơn giản để làm cho màu xanh da trời. Mình muốn thêm lớp này vào tiêu đề* Chú chó con dễ thương*. Những gì chúng ta đang làm là tạo một mảng để lưu trữ các lớp CSS, sau đó sử dụng phương thức join để phân chia các lớp với spave. Vì vậy, bây giờ, className sẽ như thế nàyjoin để phân chia các lớp với spave. Vì vậy, bây giờ, className sẽ như thế này 6Nhìn vào 2 cách trên bạn có thể thấy rằng chúng không tiện sửa đổi đặc biệt khi gặp trường hợp UI phức tạp. Không ai muốn viết nhiều câu điều kiện để style cho các component của mình phải không nào ? Đó là lý do tại sao mình muốn giới thiệu đến các bạn Styled-components Styled-componentsUse the best bits of ES6 and CSS to style your apps without stress Các style Component là 1 thư viện giúp bạn dễ dàng thay đổi các thuộc tính CSS. Bạn chỉ cần install chúng qua npm hoặc yarn bằng câu lệnh sau : Các style Component là 1 thư viện giúp bạn dễ dàng thay đổi các thuộc tính CSS. Bạn chỉ cần install chúng qua npm hoặc yarn bằng câu lệnh sau :
Sau đó sử dụng styled-components để styles cho components của bạn. chúng ta sẽ tiếp tục thực hiện với ví dụ trên. 7Để sử dụng được chúng ta cần import styled-components vào component của mình. Chúng ta import nó như là một tên gọi styled. Sau đó chúng ta định nghĩa phần tử HTML nào sẽ được sử dụng cho từng thành phần được style . Ví dụ 8Nó có nghĩa là components Button này là viết tứ theo styled-component render 1** ** . Sau đó chúng ta chỉ cần di chuyển các thuộc tính CSS đến từng styled-component . Nó cực kì đơn giản như vậy thôi. Tiếp theo làm như thế nào để thay đổi tiêu đề bằng cách sử dụng styled-component? Các styled-compoent tận dụng lợi thế của các ES6 template literals. 9Chúng ta truyền props skyblue cho component Title chúng được xây dựng với các styled-components. Chúng ta có thể truyền 1 hàm cho các thuộc tính CSS mà chúng ta muốn sửa đổi thông qua các template literals. Như bạn thấy chúng ta sử dụng 1 arrow funtion 3 để xác định trong điều kiện nào thì Title là màu xanh da trời. Bây giờ bạn hãy mở Chrome Devtools để xem điều gì sẽ xảy ra khi chúng ta xây dựng component với các styled-component . Các Styled-components được xây dựng 1 hệ thống CSS module tích hợp, điều nay là vời để giải quyết các vấn đề xung đột tên lớp. Tuy nhiên, chúng ta không chắc chắn những lớp nào là chúng ta đang sử dụng khi chúng là muốn debug. Ngoài ra khi kiểm tra chức năng render trong Context.jsx 0Bạn có biết chúng ta đang sử dụng phần từ HTML nào không? hoàn toàn không, phải không? Bạn phải nhìn lại từng styled-components để kiểm tra xem phần tử HTML nào đang sử dụng. Điều đó thực sự gây phiền nhiễu. Ngoài ra, khi bạn xây dựng các components theo kiểu theo cách này, về cơ bản, bạn chỉ cần từ bỏ các tính năng mạnh mẽ của các bộ chọn CSS. Từ các vấn đề ở trên, Mình muốn giới thiệu 1 phương pháp đơn giải để xây dựng 1 styled-component theo kiểu debug, kết hợp CSS chúng với styled-components. Kết hợp CSS selectors với Styled-componentsChúng ta chỉ cần thêm các ClassName vào các component chung và dễ dàng style chúng với styled-components.ClassName vào các component chung và dễ dàng style chúng với styled-components. 1Chúng ta cần swap Content.jsx thông qua prop className và chúng ta có thể style cho nó với mẫu này: 2Sau đó chúng ta có thể swap bất kì component nào vào styled-component, Ngoài ra chúng ta cũng có thể sử dụng sức mạnh của các CSS selector bên trong styled-component. Thậm chí, cú pháp CSS có sẵn trong styled-components. Để xem điều đó sảy ra như thế nào khi chúng ta mở console trong Chrome Devtools. Bây giờ các class đã có ý nghĩa, và chúng ta vẫn được hưởng lợi từ hệ thống CSS module do các className prop. Nói đơn giản chúng ta chỉ cần quan tâm các class name CSS bên trong component. Và kết quả Cuộc sống chưa bao giờ tươi đẹp đến thế Cuộc sống chưa bao giờ tươi đẹp đến thếTóm lạiChúng ta đã đi tìm hiểu về 2 phương pháp style cho Component thông qua CSS theo kiểu truyền thống. Sau đó, chúng ta đã học được cách style cho Component dễ dàng với styled-components . Cuối cùng, chúng ta đã kết hợp các CSS selector với styled-components . Bây giờ các Component có thể dễ dàng style và cũng có thể Debug. Nguồn : https://medium.freecodecamp.org/how-to-build-a-debuggable-styled-component-10f7e4fbea2 |