以下是我的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>
以下是反应引导如何给我输出：
<button class="btn btn-primary"></button>
因为我使用bsStyle(react-bootstrap)而不是styleName(react-css-modules),所以我没有被隔离,因此我不能将引导CSS样式应用于元素.
有没有办法通过隔离其类来匹配postcss-modules生成的输出,我可以使用react-bootstrap？
感谢预期.
解决方法
在使用与css-module的反应引导时,我也面临着同样的问题.在我的情况下,它是Tabs组件.它看起来很黑,但为我工作.我用一个类包装了组件,在类中我写了scss,如下所示
// myComponent.scss
.myComponent {
:global {
.nav-tabs {
li {
//my custom css for tabs switcher
}
}
}
}
和MyComponent.js是
const tabsInstance = (
<Tabs defaultActiveKey={1} animation={false} id='noanim-tab-example'>
<Tab eventKey={1} title='Sign up'>Tab 1 content</Tab>
<Tab eventKey={2} title='Login'>Tab 2 content</Tab>
</Tabs>
)
export const MyComponent = () => (
<div className={classes.myComponent}>
{ tabsInstance }
</div>
)
export default MyComponent
希望这是你正在寻找的.