如何使用react-bootstrap与postcss-module和react-css-module？

Question

以下是我的 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生成的输出？

谢谢您的期待。

- shet_tayyy

Answer 1

在使用 react-bootstrap 和 css-module 时，我也遇到了同样的问题。在我的情况下，是 Tabs 组件。虽然看起来有点 hacky，但对我有效。我将组件包装在一个类中，在类内部按如下方式编写 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

希望这是你需要的内容。

- Nur Rony

---

我卸载了postcss模块，因为我在项目中需要使用react-bootstrap。但是我会检查你的解决方案是否能解决我的问题。谢谢。 - shet_tayyy

Answer 2

你确定你正从react-bootstrap中导入Button组件吗？在我的React组件中，我必须通过import Button from 'react-bootstrap/lib/Button';导入它，并且我必须将它写成<Button>而不是<button>。

在我的情况下，以下代码可以正常工作：

<Button bsStyle={'btn btn-primary' + ' ' + styles.customButtonClass}>测试</Button>

react-bootstrap将某些元素（包括Button）转换为

，并将提供给bsStyle的值映射到Bootstrap类。你可以通过组合来自css-modules的生成的className和实际的Bootstrap类来覆盖这一点。

- Chris Knepper

---

嗨，我已经将 import {Button} from 'react-bootstrap'; 添加到问题中。很抱歉我错过了它。我会尝试这个并让你知道结果。 - shet_tayyy

不行，这个没用。请注意我也在使用react-css-module。另外，react-bootstrap需要一个额外的CSS主题文件，我从bootstrap包中提供。我希望这个bootstrap CSS文件可以全局可用，以便本地文件可以访问它。 - shet_tayyy