如何使用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样式应用于元素.

有没有办法通过隔离它的类以匹配postcss-modules生成的输出来使用react-bootstrap？

谢谢你的期待.

Answer 1

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

就我而言，以下工作有效：

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

react-bootstrap 将某些元素（包括Button）转换为 div，并将提供的值映射bsStyle到 Bootstrap 类。您可以通过组合生成的 classNamecss-modules和实际的 Bootstrap 类来覆盖它。