Как использовать реакцию-бутстрап с postcss-модулем и реакционным 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);

Ниже мой файл 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>

Ниже приведено как реакция-бутстрап даст мне результат:

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

который не был изолирован, поскольку я использую bsStyle (реакция-бутстрап), а не styleName (response-css-modules), и поэтому я не могу применить стиль cssstrap-стиля к элементу.

Есть ли способ, с помощью которого я могу использовать реакцию-бутстрап, изолируя его класс, чтобы он соответствовал выходу, создаваемому postcss-modules?

Спасибо в ожидании.

Ответ 1

Я также столкнулся с такой же проблемой при использовании react-bootstrap с css-module. В моем случае это был компонент Tabs. Это выглядит взломанным, хотя и работает для меня. Я завернул компонент классом, и внутри класса я пишу 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

Надеюсь, это то, что вы ищете.

Ответ 2

Вы уверены, что импортируете компонент Button из react-bootstrap? В моем компоненте React я должен импортировать его через import Button from 'react-bootstrap/lib/Button';, и я должен записать его как <Button>, а не <Button>.

В моем случае следующие работы:

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

response-bootstrap преобразует определенные элементы (включая Button) в divs и отображает значение, предоставленное bsStyle классу Bootstrap. Вы можете переопределить это, объединив сгенерированное имя класса из css-modules и фактического класса Bootstrap.