下面是我的 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),所以它没有被隔离,因此我无法将 bootstrap css 样式应用到元素。
有没有一种方法可以通过隔离它的类来使用react-bootstrap来匹配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
希望这就是您正在寻找的内容。
关于twitter-bootstrap - 如何将react-bootstrap与postcss-module和react-css-module一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35721742/