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 反应包装器，现在我已将 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

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

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

请参阅从 Webpack 中的“node_modules”导入 CSS

或者，将其导入您的组件中（不带~）：

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

但是，我建议您在 React 应用程序中使用 Intro.js 的 React 包装器。

他们甚至有一个代码沙箱可以开始