组件库-样式解决方案在文档中，部分例子为了方便，直接使用了 style，但是通常不推荐将 style 属性作为设置元素样

几种样式解决方案

inline css

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

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

css in js

“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。如style-components

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

less/sass

样式系统文件结构

styles/ 
     _variables.scss(各种变量及可配置设置)
     _mixins.scss(全局mixins)
     _functions.scss(全局functions)
ccomponents/
	  button/
                style.scss(组件单独样式)