10

下面是我的 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) 并没有被隔离,因此我无法将引导 css 样式应用于元素。

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

感谢期待。

4

2 回答 2

2

react-bootstrap我在使用with时也遇到了同样的问题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

希望这是您正在寻找的。

于 2016-07-28T05:31:12.617 回答
0

您确定要从中导入 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 类。您可以通过结合生成的 className fromcss-modules和实际的 Bootstrap 类来覆盖它。

于 2016-03-01T22:26:42.907 回答