样式与 CSS

如何为组件添加 CSS 的 class？

传递一个字符串作为 className 属性：

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

CSS 的 class 依赖组件的 props 或 state 的情况很常见：

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

提示

如果你经常发现自己写类似这样的代码，classnames 的 package 可以简化这一过程。

可以使用行内样式吗？

可以，在此处查看关于样式的文档。

行内样式不好 (bad) 吗？

从性能角度来说，CSS 的 class 通常比行内样式更好。

什么是 CSS-in-JS?

“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在此处阅读 CSS-in-JS 库之间的对比。

注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度；如果存在疑惑，比较好的方式是和平时一样，在一个单独的 *.css 文件定义你的样式，并且通过 className 指定它们。

可以在 React 中实现动画效果吗？

React 可以被用来实现强大的动画效果。参见 React Transition Group 和 React Motion 等示例。