twitter-bootstrap – 如何使用反应引导与postcss模块和反应css

发布时间：2020-12-18 00:27:37 所属栏目：安全来源：网络整理

导读：以下是我的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 ex

以下是我的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(react-bootstrap)而不是styleName(react-css-modules),所以我没有被隔离,因此我不能将引导CSS样式应用于元素.

有没有办法通过隔离其类来匹配postcss-modules生成的输出,我可以使用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

希望这是你正在寻找的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!