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

【问题标题】：Css not working for intro.js module in ReactCss 不适用于 React 中的 intro.js 模块
【发布时间】：2019-12-13 20:18:29
【问题描述】：

我在其中一个组件中添加了如下 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}
                    />

下面是显示的内容：

【问题讨论】：

doesn't render 表示该组件根本不存在于 DOM 中，或者您根本看不到它？
组件存在 @AdamKosmala 没有应用 css
我会验证 ListLandingPage.css 是否在任何地方加载，以及导入的文件是否在您的 css 包中可用。我不熟悉 introJs，但也可以尝试用 import * as introJs from 'intro.js' 替换您的导入
@vini 请在他们的 github 上提出这个问题
@vini 我假设您正在使用 webpack？如果是这样，您的配置是什么？

标签： javascript reactjs intro.js

【解决方案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 开始使用

【讨论】：

我尝试了 React Wrapper 它没有解决同样的问题将尝试这个谢谢。
我让模块加载器失败
当使用~或在组件中导入它时（没有~）？

【解决方案2】：

请为 intro.js 使用 react wrapper。

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

【讨论】：

【解决方案3】：

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

【讨论】：