Twitter bootstrap 如何将react引导与postcss模块和react css模块一起使用？

下面是我的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);

import React，{Component}来自'React'；
从“react css模块”导入css模块；
从“react bootstrap”导入{Button}；
从“./Greeter.css”导入样式；
常量选项={
“allowMultiple”：true
};
类迎宾扩展组件{
render（）{
返回(
欢迎来到Devops。
这是一个惊人的段落
热模块重新加载

试验
);
}
}
导出默认CSS模块（问候者、样式、选项）；

下面是我的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'));

从“React”导入React；
从'react dom'导入{render}；
从“./问候者”导入问候者；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“bootstrap/dist/css/bootstrap theme.min.css”；
导入“/main.css”；
render（，document.getElementById（'root'））；

我使用postsss模块和react css模块来隔离组件中的选择器，因此，当文件加载时，类名会变成类似于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引导程序的类来匹配postcss模块生成的输出，从而使用react引导程序

---

非常感谢。

您确定要从

react bootstrap

导入按钮组件吗？在我的React组件中，我必须通过

import按钮从'React bootstrap/lib/Button'导入它，我必须以
而不是
的形式编写它

在我的情况下，以下工作：

测试

react引导将某些元素（包括
按钮
）转换为div，并将提供给
bsStyle
的值映射到引导类。您可以通过组合从
css模块生成的类名和实际的引导类来覆盖它。
我在使用
resact Bootstrap
和
css模块时也遇到了同样的问题。在我的例子中，它是
Tabs
组件。虽然看起来很粗糙，但对我来说很有用。我用一个类包装该组件，并在该类中编写SCS，如下所示

// 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

const tabsInstance=(
表1内容
表2内容
)
导出常量MyComponent=（）=>(
{tabsInstance}
)
导出默认MyComponent

希望这就是您想要的。
您好，我已经从“react bootstrap”添加了导入{Button}；回答这个问题。对不起，我错过了。我会试试这个，让你知道。不，这不管用。请不要说我也在使用react css模块。另外，react引导需要一个额外的css主题文件，我从引导包中提供了这个文件。我希望此引导css文件可供本地文件全局访问。我卸载了postcss模块，因为我必须在项目中使用react引导。但我会检查你的解决方案是否解决了我的问题。谢谢