Ниже представлен мой файл 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?
Спасибо в ожидании.