Jak używać reakcji-bootstrap z modułem postcss i modułem reagowania-css?

Question

Poniżej jest mój plik 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); 

Poniżej jest mój plik 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')); 

używam postcss-modułów i reagować-CSS-moduły wyizolować selektorów w ramach komponentów dzięki temu, gdy plik się ładuje, nazwa klasy staje się czymś w rodzaju _3lmHzYQ1tO8xPJFY8ewQax.

Przykład:

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

Poniżej jest jak reagować-bootstrap da mi wyjście:

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

który nie został wyizolowany jak używam bsStyle (reagują-bootstrap) zamiast styleName (react-css-modules) i dlatego nie mogę zastosować stylu bootstrap css do elementu.

Czy istnieje sposób, za pomocą którego mogę użyć reakcji-bootstrap przez odizolowanie jego klasy, aby dopasować wyjście, które generują moduły postcss?

Dzięki w oczekiwaniu.

Answer 1

Czy jesteś pewien, że importujesz komponent Button z wersji react-bootstrap? W moim komponencie React, muszę zaimportować go przez import Button from 'react-bootstrap/lib/Button';, a muszę napisać go jako <Button> zamiast <button>.

W moim przypadku, następujące prace:

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

reagować-bootstrap przekształca niektóre elementy (w tym Button) do div i mapuje wartość podana do bsStyle do klasy startowej. Można to zmienić, łącząc wygenerowaną nazwę klasy z css-modules i rzeczywistą klasę Bootstrap.

Answer 2

Wystąpił również ten sam problem podczas korzystania z react-bootstrap z css-module. W moim przypadku był to komponent Tabs. Wygląda jednak na bezczelnego, ale pracował dla mnie. I owinięty komponent z klasą oraz w klasie piszę SCSS następująco

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

i MyComponent.js jest

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 

nadzieję, że to, czego szukasz.