javascript - Css 不适用于 React 中的 intro.js 模块

Question

我在我的组件之一中添加了 Intro.js，如下所示:

import introJs from 'intro.js';

然后在componentDidMount中调用

    componentDidMount() {
    introJs().start();
}

我在其中使用它的元素:

 <div className={cx('dropDownSortingBlock')}>
                {!isTrending && <div className={cx('dropDown')} data-intro={'Hello step one!'}>

但是当我将 css 导入父组件时

它不渲染组件。

更新:

我尝试使用 intro.js react wrapper，现在我已经将 css 直接导入到我的文件中。

然而它就是行不通

 constructor() {
        super();

        this.state = {
            showMessage: false,
            type: '',
            message: '',
            stepsEnabled: true,
            initialStep: 0,
            steps: [
                {
                    element: '.snapshotWrapper',
                    intro: 'Hello step',
                },
                {
                    element: '.snapshotWrapperNew',
                    intro: 'Hello Sort wrapper',
                },
            ],
        };
    }

渲染中

  <Steps
            enabled={this.state.stepsEnabled}
            steps={this.state.steps}
            initialStep={this.state.initialStep}
            onExit={this.onExit}
                    />

下面是显示的内容:

Answer 1

因为您要从 node_modules 中的包中导入 css 文件，所以将 ~ 添加到 ListLandingPage 中的导入中。 CSS :

@import "~intro.js/introjs.css";

参见 Import CSS from "node_modules" in Webpack

或者，将其导入到您的组件中(不带 ~ ):

import introJs from 'intro.js';
import 'intro.js/introjs.css'; 

但是，我建议您使用 React wrapper around Intro.js对于 React 应用。

他们甚至有一个 code sandbox开始