Css not working for intro.js module in React

Question

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

import introJs from 'intro.js';

Then called it in componentDidMount

    componentDidMount() {
    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 component

It doesn't render the component.

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:

Answer 1

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 component ( 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

Answer 2

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 component. for that :- import { Steps, Hints } from "intro.js-react";