下面是我的 Greeter.jsx 文件:
import React, {Component} from 'react';
import cssModules from 'react-css-modules';
import {Button} from 'react-bootstrap';
import styles from './Greeter.css';
const option = {
'allowMultiple': true
};
class Greeter extends Component{
render() {
return (
<div styleName='root root-child'>
<h1>Welcome to React Devops.</h1>
<p styleName="para">This is an amazing para.</p>
<p>Hot module reload.</p>
<Button bsStyle="primary">Test</Button>
</div>
);
}
}
export default cssModules(Greeter, styles, option);
下面是我的 main.js 文件:
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import './main.css';
render(<Greeter />, document.getElementById('root'));
我使用postcss-modules 和 react-css-modules来隔离组件内的选择器,因此,当文件加载时,类名变成类似于 _3lmHzYQ1tO8xPJFY8ewQax 的东西。
例子:
<div class="_3lmHzYQ1tO8xPJFY8ewQax _32vj3squi8uWPfEu4ZzyBZ" data-reactid=".0"></div>
下面是 react-bootstrap 如何给我输出:
<button class="btn btn-primary"></button>
由于我使用 bsStyle (react-bootstrap) 而不是 styleName(react-css-modules) 并没有被隔离,因此我无法将引导 css 样式应用于元素。
有没有办法通过隔离它的类来使用 react-bootstrap 以匹配 postcss-modules 生成的输出?
感谢期待。