We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

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 GroupReact MotionReact Spring 或是 Framer Motion

Is this page useful?Edit this page