Hướng dẫn css-in-js 2022
Thinking in components — Bạn sẽ không còn phải maintain 1 đống style-sheets nữa. CSS-in-JS sẽ trích xuất model CSS theo level component, thay vì theo level document (modularity). Show Ví dụ về Styled React ComponentNhiều khả năng là bạn đã nghe đến những thuật ngữ như CSS-in-JS, Styled Components, Radium, Aphrodite & tự hỏi “tại sao lại có thứ này nữa?—Tôi đã & đang rất hài lòng với CSS-in-CSS (CSS trong .css)” CSS-in-JS là 1 topic nhạy cảm, gây nhiều tranh cãi, được xem là concept tốt nhất giúp bạn không cần phải maintain folder chứa đầy các stylesheet. Xem qua CSS-in-JS. CSS-in-JS là gì?
Nhớ rằng Inline styles & CSS-in-JS không giống nhau! Chúng hoàn toàn khác nhau ! Cách thức hoạt động của Inline Stylesconst textStyles = { color: white, backgroundColor: black } Trong hệ điều hành, việc này sẽ dính vào DOM node như thế này:
Cách thức hoạt động của CSS-in-JSimport styled from 'styled-components'; const Text = styled.div` color: white, background: black ` Trong browser, đoạn code này sẽ attach với DOM như thế này:
Sự khác biệtBạn có nhận ra sự khác biệt nào không? CSS-in-JS gắn tag |