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 introJs from 'intro.js';
import 'intro.js/introjs.css';

但是，我建议您使用 React wrapper around Intro.js 作为 React 应用程序。

他们甚至有 code sandbox 入门

Answer 2

你试过了吗https://www.npmjs.com/package/intro.js-react。它是 Intro.js 周围的小型 React 包装器。包装器提供对步骤和提示的支持

Answer 3

请为 intro.js 使用 React 包装器。

npm 安装 intro.js-react
同时安装 intro js --> npm install intro.js --save
然后你可以像下面这样从节点模块导入 css 文件导入“介绍。js/introjs。css” 主题文件夹中也提供了主题。（例如：import "intro.js/themes/introjs- nassim.css";)
Wrapper 的工作原理类似。在组件内定义步骤/提示。为了那个原因：- 从“intro.js-react”导入{步骤，提示}；

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

Css not working for intro.js module in React

javascript

intro.js

reactjs