postcss-moduleとreact-css-moduleでreact-bootstrapを使用するにはどうすればいいですか？以下

Question

は私のGreeter.jsxファイルです：私は、コンポーネント内のセレクタを隔離するpostcss-モジュールと反応し-CSS-モジュールを使用

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')); 

：以下

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ファイルですそのため、ファイルがロードされると、クラス名は_3lmHzYQ1tO8xPJFY8ewQaxのようになります。

例：以下

<div class="_3lmHzYQ1tO8xPJFY8ewQax _32vj3squi8uWPfEu4ZzyBZ" data-reactid=".0"></div> 

反応し、ブートストラップは私に出力与える方法です：私はbsStyleを使用して単離されていない

<button class="btn btn-primary"></button> 

を（反応-ブートストラップ）のではなく、 styleName（react-css-modules）であり、私は要素にブートストラップCSSスタイルを適用できません。

postcss-modulesが生成する出力と一致するようにクラスを分離することによって、反応ブートストラップを使用できる方法はありますか？

ありがとうございます。

Answer 1

ボタンコンポーネントをreact-bootstrapからインポートしてもよろしいですか？私のReactコンポーネントでは、import Button from 'react-bootstrap/lib/Button';でインポートする必要があります。<button>ではなく、<Button>と記述する必要があります。私の場合

、次の作品：

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

反応-ブートストラップは、div要素に（Button含む）特定の要素を変換し、ブートストラップ・クラスにbsStyleに提供された値をマッピングします。 css-modulesの生成されたclassNameと実際のBootstrapクラスを組み合わせることで、これを無効にすることができます。

Answer 2

react-bootstrapをcss-moduleと使用しているときに同じ問題が発生しました。私の場合、それはTabsコンポーネントでした。それはハッキーに見えるが、私のために働いた。私は、クラスとコンポーネントを包み、クラス内

// myComponent.scss 
.myComponent { 
     :global { 
     .nav-tabs { 
      li { 
      //my custom css for tabs switcher 
      } 
     } 
     } 
    } 

を次のように私はSCSSを書き、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 

希望です。