React - Thiết lập style như thế nào?
TIL
542
reactjs
30
react
4
style
2
@100daysTIL
66
White

Minh-Trung Nguyễn viết ngày 31/03/2018

React - Thiết lập style như thế nào?

Day 35:

Lúc làm theo tutorial dạy React thì phần style rất đơn giản, đơn thuần đặt class cho component, rồi đặt style cho class đó trong 1 file CSS bên ngoài. Làm thêm 1 lúc lại thấy có những khái niệm như styled-component, CSS-in-JS, xem hướng dẫn của Semantic-UI càng thấy lạ. Tra thử tài liệu của React xem hướng dẫn thì thấy mấy phần hỏi - trả lời rất tốt cho người mới học.

React - Styling và CSS

Làm thế nào để thêm CSS class vào component?

Đơn giản là truyền tên class đó dưới dạng string vào props className:

render() {
  return <span className="menu navigation-menu">Menu</span>
}

Sau đó đặt thông số style cho các class menu, navigation-menu ở 1 file .css bên ngoài.

Việc truyền string vào props có thể được xử lý ngay trước đó theo điều kiện của props hoặc state:

render() {
   let className = 'menu';
   if (this.props.isActive) {
        className += 'menu-active';
   }
   return <span className={className}> Menu </span>
}

Nếu thường xuyên viết kiểu trên thì ta có thể cân nhắc sử dụng 1 package tên là className, xem ở đây

Ta có thể dụng style kiểu "inline" được không?

Được. Xem phần hướng dẫn ở đây

Từ "style" ở trong phần này rất khó dịch ra tiếng Việt, nó có nhiều nghĩa:

  1. "style" (là danh từ): trong front-end truyền thống, chỉ layout, màu sắc, font chữ, vẻ bên ngoài, những thứ như hover, hiệu ứng cũng là style.
  2. "style" (là động từ): chỉ việc áp dụng "style cho 1 element nào đó". Giống như khi nói là "Phải style cho em <div> này thành màu đỏ thay vì màu hường".
  3. "style" (là 1 attribute của component trong React, nhận vào giá trị là 1 object)

React chủ yếu nói về cái "style" thứ 3, ở trên. Do nó có thể nhận vào 1 object không khác gì 1 variable, cho nên nó thường được dùng nhiều trong các tình huống mà người ta cần thay đổi nó tùy lúc tùy nơi, theo những điều kiện không cố định (dynamically-computed style at render time)

Object được gán cho attribute style cũng không phải thích viết kiểu gì cũng được, mà buộc phải theo 1 quy tắc.

Ví dụ: Theo kiểu viết style inline truyền thống, ta viết như sau:

<div style="background-color: yellow; color:blue; margin-left:30px;">Xin chào freeCodeCamp Hanoi</div>

Nhưng trong React, object truyền vào cho attribute style phải trông như sau:

const divStyle = {
    backgroundColor: 'yellow',
    color: 'blue',
    marginLeft: '30px'
};

function HelloFCCHanoiComponent() {
    return <div style={divStyle}>Xin chào freeCodeCamp Hanoi</div>
}

Nhìn qua ta thấy:

  • String "background-color" chuyển sang thành "backgroundColor"
  • String "color" vẫn thế
  • String "margin-left" đổi thành "marginLeft"

Việc biết thành camelCased này, theo React là để:

  • cho đồng nhất với DOM style JavaScript property
  • hiệu quả hơn
  • ngăn ngừa lỗ hổng bảo mật XSS.

Ở mục này còn có nó cách hỗ trợ các trình duyệt cũ.

"Inline" thì dùng được, nhưng có nên dùng kiểu đó hay không?

Thường thì viết ra 1 file CSS sẽ hiệu quả hơn viết dạng inline.

CSS-in-JS là gì?

"CSS-in-JS" để chỉ cách viết CSS trực tiếp trong JavaScript thay vì định nghĩa CSS trong 1 file bên ngoài. Có 1 vài thư viện CSS-in-JS, bạn có thể đọc so sánh giữa các thư viện ở đây

Lưu ý rằng "functionality" (viết mọi thứ theo kiểu hàm) không phải là một phần của React, mà được cung cấp bởi bên thứ 3. React không can thiệp vào lựa chọn của người dùng; nhưng một khi bản thân người dùng vẫn phân vân, thì tốt nhất cứ khởi đầu bằng việc đặt style trong 1 file `.cssở bên ngoài, rồi trỏ đến nó trong component thông quaclassName`.

Tôi có thể tạo animation trong React?

React hỗ trợ những animation phức tạp. Hãy đọc các mục như React Transition GroupReact Motion

ngminhtrung 30-03-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

50 bài viết.
39 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
27 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 4 tháng trước
27 5
White
26 3
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 2 ngày trước
26 3
White
9 4
Day 38: Bài toán: Tự học ReactJS bằng cách làm onepage app đơn giản ((Link)), vấn đề mình đau đầu nhất là (1) lên layout, và (2) làm style cho a...
Minh-Trung Nguyễn viết 15 ngày trước
9 4
Bài viết liên quan
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
19 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 9 tháng trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
50 bài viết.
39 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!