Hướng dẫn stylesheet reactjs - biểu định kiểu reactjs
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' Có tất cả 4 cách khác nhau để viết style cho các React Components, tùy thuộc vào sở thích cá nhân và độ phức tạp cụ thể của ứng dụng. Ví dụ: Nếu bạn chỉ muốn thêm vài thuộc tính style cho components/elements thì inline style là lựa chọn tốt nhất. Khi bạn muốn tái sử dụng các components/elements đã được style trong cùng một file thì style-component là một lựa chọn hoàn hảo. Khi ứng dụng của bạn phức tạp hơn thì tôi đánh giá cao việc sử dụng CSS Modules hoặc sử dụng CSS stylesheets thông thường. 1. CSS StylesheetĐơn giản là các bạn sẽ import file css vào component bằng cách 1nên bạn có thể tách file css ra cho mỗi component. Tuy nhiên dù bạn chỉ import ở 1 component nhưng css được import sẽ được áp dụng lên toàn bộ ứng dụng. 2. Inline stylingTrong React, inline styles không được viết dưới dạng string (chuỗi) như html thông thường. Thay vào đó nó sẽ được viết dưới dạng Object với key được viết theo kiểu camelCased còn style của value sẽ thường là kiểu string. Ngoài ra, chúng ta cũng có thể tạo một biến lưu trữ giá trị css rồi truyền nó vào các element như sau: 2hoặc truyền thẳng style vào element: 33. CSS ModulesMột CSS Module là một file CSS mà tất cả các tên class và tên hiệu ứng sẽ được bao bọc lại và chỉ có tác dụng trong những file được import. Để có thể dễ hiểu hơn mình xin đưa ra một ví dụ cụ thể hơn về CSS module: 4Hơi khác với import css thông thường ta import css bằng cách: 9 sau đó ta sử dụng như một object.Với những bạn nào sử dụng thư viện create-react-app để tạo ứng dụng thì cách viết ở trong file CSS hơi khác biệt một chút, đó là ta phải viết theo cú pháp 0. Ví dụ: 5Còn với nhưng bạn sử dụng boilerplate khác thì có thể viết css như thường và thêm đoạn loader dưới đây vào file config webpack: 64. Styled-components 💅Styled-components là một thư viện dành cho React và React Native cho phép bạn viết style ở cấp độ component trong ứng dụng của bạn. Đầu tiên ta phải cài đặt thư viện styled-components: 7Giờ chúng ta có thể tạo các biến mới bằng cách sử dụng các thẻ html quen thuộc và thêm style cho chúng theo cú pháp: 1Sau đó ta có thể sử dụng biến mới tạo này như các React Component: 2Sau đây là một ví dụ cụ thể hơn: 85. Tổng kết:Tất cả những phương pháp trên đều có những ưu điểm và nhược điểm, vì vậy hãy suy nghĩ, tính toán trước về độ phức tạp của ứng dụng cũng như sở thích của bạn để chọn ra phương pháp hợp lý và hiệu quả nhất. Nguồn: https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 |