Styling and CSS

如何在 Component 中加入 CSS Class？

傳遞一個 string 作為 className 的 prop：

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

通常 CSS class 會依賴 component 的 prop 或 state：

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

小技巧

如果你發現你常寫類似的程式碼，可使用 classnames 函式庫簡化。

可以使用 Inline Style 嗎？

可以，請見此處 文件關於 styling 部分。

Inline Style 不好嗎？

CSS class 通常比 inline style 效能更好。

CSS-in-JS 是什麼？

「CSS-in-JS」指的是使用 JavaScript 組成 CSS 而非將其定義於外部檔案的一種模式。

請注意此功能為第三方函式庫所提供，並非 React 的一部份。 React 對 style 是如何定義並無意見。若有疑問，照常地將你的 style 定義於另一個 *.css 檔案中然後使用 className 去引用會是個好的開始。

我可以在 React 中做動畫嗎？

React 可以支援動畫。範例請見 React Transition Group 和 React Motion 、 React Spring 或是 Framer Motion。