Hướng dẫn css-in-js react

Làm thế nào tôi chèn class CSS cho các component?

Truyền tên của class cho prop là className:

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

Thông thường các class CSS phụ thuộc vào các component props hoặc state:

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

Tip

Nếu bạn thường thấy mình viết code như thế , classnames thư viện này sẽ làm đơn giản nó.

Tôi có dùng được inline styles?

Có, xem tài liệu styling tại đây.

Viết inline styles xấu?

Các class CSS thường sẽ có hiệu suất tốt hơn là inline styles.

CSS-in-JS là gì?

“CSS-in-JS” đề cập đến một pattern trong đó CSS ​​được tạo bằng JavaScript thay vì được định nghĩa trong các tệp bên ngoài.

Lưu ý đây không phải là thư viện của React, nhưng được cung câp bởi thư viện thứ ba. React không có ý kiến về cách xác định style; nếu nghi ngờ, bạn có thể định nghĩa style trong một tệp *.css riêng và tham chiếu tới chúng sử dụng className.

Tôi có thể dùng animations trong React?

React có thể sử dụng animations rất tốt. Xem ví dụ React Transition Group và React Motion hoặc React Spring.

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).

Ví dụ về Styled React Component

Nhiề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ì?

JSS là abstraction mạnh mẽ hơn CSS. JSS sử dụng JavaScript như 1 ngôn ngữ để mô tả các styles theo cách declarative & maintainable. JSS là JS high performance đến CSS compiler hoạt động ở runtime & server-side. CORE LIBRARY THUỘC LEVEL THẤP & framework agnostic, NẶNG khoảng 6KB (ĐÃ minified & gzipped) Có thể extensible bằng plugins API. — nguồn

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 Styles

const textStyles = {
  color: white,
  backgroundColor: black
}

inline style!

Trong hệ điều hành, việc này sẽ dính vào DOM node như thế này:

inline style!

Cách thức hoạt động của CSS-in-JS

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`

Hello CSS-in-JS

Trong browser, đoạn code này sẽ attach với DOM như thế này:

Hello CSS-in-JS

Sự khác biệt

Bạn có nhận ra sự khác biệt nào không? CSS-in-JS gắn tag