javascript - Css not working for intro.js module in React - Stack Overflow

I have added Intro.js as below in one of my ponents:import introJs from 'intro.js';Then calle

I have added Intro.js as below in one of my ponents:

import introJs from 'intro.js';

Then called it in ponentDidMount

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

Element where I am using it at:

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

However when i import css into a parent ponent

It doesn't render the ponent.

Update:

I tried using intro.js react wrapper and i have imported css directly into my file now.

However it just doesn't work

 constructor() {
        super();

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

In render

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

Below is what shows up:

I have added Intro.js as below in one of my ponents:

import introJs from 'intro.js';

Then called it in ponentDidMount

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

Element where I am using it at:

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

However when i import css into a parent ponent

It doesn't render the ponent.

Update:

I tried using intro.js react wrapper and i have imported css directly into my file now.

However it just doesn't work

 constructor() {
        super();

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

In render

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

Below is what shows up:

Share Improve this question edited Aug 9, 2019 at 4:37 vini asked Aug 6, 2019 at 9:49 vinivini 4,74024 gold badges84 silver badges176 bronze badges 5
  • By doesn't render you mean the ponent is not present in DOM at all, or you simply can't see it? – Adam Kosmala Commented Aug 6, 2019 at 12:11
  • The ponent is present @AdamKosmala the css isn't getting applied – vini Commented Aug 6, 2019 at 12:36
  • I would verify if ListLandingPage.css is loaded at all anywhere and if the imported files are available in your css bundle. I'm not familiar with introJs, but maybe try also replacing your import with import * as introJs from 'intro.js' – Adam Kosmala Commented Aug 6, 2019 at 12:40
  • @vini Please raise this on their github – Pawan Gangwani Commented Aug 6, 2019 at 15:47
  • @vini I'm presuming you're using webpack? If so what's your config? – Riddell Commented Aug 14, 2019 at 14:15
Add a ment  | 

3 Answers 3

Reset to default 7 +25

Because you're importing the css file from the package in node_modules , Add the ~ to your import in ListLandingPage.css :

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

see Import CSS from "node_modules" in Webpack

Or, import it in your ponent ( without the ~ ) :

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

Howerver, I would suggest you use the React wrapper around Intro.js for a React app.

they even have a code sandbox to get started

Please use react wrapper for intro.js.

  1. npm install intro.js-react
  2. also install intro js -- > npm install intro.js --save
  3. then you can import css files from node modules like this below import "intro.js/introjs.css" themes are also available on the themes folder.(for eg: import "intro.js/themes/introjs- nassim.css";)
  4. Wrapper works similarly. Define steps / hints inside ponent. for that :- import { Steps, Hints } from "intro.js-react";

Did you try https://www.npmjs./package/intro.js-react . It is a small React wrapper around Intro.js. The wrapper provides support for both steps and hints

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742314592a4420582.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信