jsx内联样式 - 用className来绑定类名

语法：

className="类名 类名2" or className={返回字符}
style={key:value,key:value}

1）公共样式在浏览器主入口通过link/style引入
2）组件import引入，实际上最终还是全局暴露

问题产生了 - 选择器冲突

解决方法：

a)命名空间
b)模块化：import 变量 from './css/xxx.css'
webpack配置 "style-loader!css-loader?modules"
<xxx className={变量.类名}

实际操作

1

image.png

App.css - 组件样式
base.css - 共同样式
App.js - 组件

image.png
image.png
image.png
image.png

打包后public里面的资源会进入到dist文件夹里面，所以在html页面中无法使用../src/assets/css/base.css

但是也可以直接在index.js中引入:

image.png

2.模块化引入

image.png
image.png