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>

styleName(react-css-modules) ではなく bsStyle (react-bootstrap) を使用しているため、分離されていないため、要素にブートストラップ css スタイルを適用できません。

postcss-modules が生成する出力と一致するようにクラスを分離することで、react-bootstrap を使用できる方法はありますか?

ありがとうございます。

4

2 に答える 2

2

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

これがあなたが探しているものであることを願っています。

于 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 は、特定の要素 ( を含む) を div に変換し、提供された値を Bootstrap クラスButtonにマップします。生成された classNameと実際の Bootstrap クラスbsStyleを組み合わせることで、これをオーバーライドできます。css-modules

于 2016-03-01T22:26:42.907 に答える