ReactJS - xung đột mức ưu tiên khi style component kiểu inline và CSS đồng thời
TIL
607
@100daysTIL
72
reactjs
34
style
2
CSS3
52
White

Minh-Trung Nguyễn viết ngày 21/04/2018

ReactJS - xung đột mức ưu tiên khi style component kiểu inline và CSS đồng thời

Day 42

Bài toán: Trong ReacJS, khi style cho component, dùng cùng 1 lúc cả 2 kiểu styling thì thằng nào sẽ ưu tiên hơn thằng nào?

Dưới đây là thứ mình vừa gặp phải, component FormError với class là form-error, mình dùng 2 kiểu styling cho nó. Trong đấy phần width bị xung đột giữa 2 kiểu, cái đầu width bằng 50%, còn cái kia là 100%.

  1. Kiểu CSS StyleSheet (được chỉ ra trong mục 1 của bài Four ways to style React components).

    /* đặt trong style.css */
    
      .form-error {
        width: calc(50% - 5px);
        margin-right: 5px;
      }
    
  2. Kiểu Inline Styling (được chỉ ra trong mục 2 của bài Four ways to style React components). Tạo 1 object tên customStyle với các properties theo kiểu camelCased, rồi gán cho attribute style của thẻ <div>

    // đặt trong file A.jsx
    
    function FormError(props) {
       // ... code code code
    
        const customStyle =
                {
                    display: '',
                    fontSize: '0.9em',
                    color: 'red',
                    marginTop: '12px',
                    textAlign: 'right',
                    width: 100%
                };
        return (
                <div style={customStyle} className="form-error">
                    {props.errorMessage}
                </div>
            ) 
    }
    

Kết quả thực tế:

Khi set style theo class, thì kiểu 2 (Inline Styling) đã overrid kiểu 1 (CSS Stylesheet). Trình duyệt đã hiện component FormError với width=100% chứ không phải width=50%.

Kết luận:

Cần google bài nào tổng kết cả 4 trường hợp, hoặc là phải tự làm.

ngminhtrung 21-04-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

58 bài viết.
74 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
44 15
Đă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 4 tháng trước
44 15
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 8 tháng trước
27 5
White
16 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 3 tháng trước
16 4
Bài viết liên quan
White
2 1
Javascript inititalValue trong reduce() có quan trọng không? Day 41: Đọc code mẫu về hàm reduce() trong (Link), thấy hàm reduce() khá "đơn giản"....
Minh-Trung Nguyễn viết 4 tháng trước
2 1
White
2 0
D3.js Biểu diễn dữ liệu dạng tree bằng việc trải nó ra trên bản đồ Series Today I Learn trong vòng 100 ngày thử thách bản thân ngày 15. Mỗi ngày 1...
Minh-Trung Nguyễn viết 6 tháng trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
58 bài viết.
74 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á!