css jsx中使用:global和对象引入样式的区别

在jsx中,通过css对象来表示类名,会被webpack等打包工具变成hash字符串避免类名重复

通过:global的方式可以避免指定的类名被编译成hash字符串

/* local scope */
.h1 {
  color:red;
}

/* global scope */
:global(.h2) {
  color: blue;
}

:global {
  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border: none;
  }
}

var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');

ReactDOM.render(
  <div>
    <h1 className={style.h1}>Hello World</h1>
    <h2 className="h2">Hello Webpack</h2>
  </div>,
  document.getElementById('example')
);