样式及 CSS

怎样给组件添加 CSS 类?

传递一个字符串给 className 属性：

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

CSS 类依赖组件的属性或状态很普遍：

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

如果你经常发现自己在写类似的代码，classnames 包可以简化它。

可以使用行内样式吗？

是的，在这里查看关于样式的文档。

写行内样式不好吗？

CSS 类比起行内样式通常更加高效。

CSS-in-JS 是什么？

“CSS-in-JS” 代表一个范式，使用 Javascript 组成CSS，而不是在额外的文件里面定义。在这里查看 CSS-in-JS 库的比较。

注意这个功能不是 React 的一部分，而是第三方库提供的。 React 没有样式应该怎样被定义的主张；如果不信，一个好的起点是项往常一样在一个分离的 *.css 文件中定义你的样式，使用className引用它们。

在 React 中如何做动画？

React 可以被用来增强动画。例如：查看 React Transition Group 和 React Motion。