关注：React的行内样式与CSS

【资料图】

如何为组件添加 CSS 的 class？

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

render() {  return Menu}

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

render() {  let className = "menu";  if (this.props.isActive) {    className += " menu-active";  }  return Menu}

style(行内样式 inline-style) 规范

注意：在文档中，部分例子为了方便，直接使用了 style，但是通常不推荐将 style 属性作为设置元素样式的主要方式。在多数情况下，应使用 className 属性来引用外部 CSS 样式表中定义的 class。style 在 React 应用中多用于在渲染过程中添加动态计算的样式。

style接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 中 style 的 JavaScript 属性是一致的，同时会更高效的，且能预防跨站脚本（XSS）的安全漏洞。例如：

const divStyle = {  color: "blue",  backgroundImage: "url(" + imgUrl + ")",};function HelloWorldComponent() {  return 
Hello World!
;}

注意：样式不会自动补齐前缀。如需支持旧版浏览器，请手动补充对应的样式属性：

const divStyle = {  WebkitTransition: "all", // note the capital "W" here  msTransition: "all" // "ms" is the only lowercase vendor prefix};function ComponentWithTransition() {  return 
This should work cross-browser
;}

Style 中的 key 采用小驼峰命名是为了与 JS 访问 DOM 节点的属性保持一致（例如：node.style.backgroundImage ）。浏览器引擎前缀都应以大写字母开头，除了 ms。因此，WebkitTransition 首字母为 ”W”。

React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位，请将此值设为数字与所需单位组成的字符串。例如：

// Result style: "10px"
  Hello World!
// Result style: "10%"
  Hello World!

但并非所有样式属性都转换为像素字符串。有些样式属性是没有单位的(例如 zoom，order，flex)。无单位属性的完整列表在此处。

行内样式不好吗？

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

参考文献React 官网：样式与 CSSReact 官网：DOM 元素