how to fix css of video.js package in reacttjs

Question

im using video.js in react for building video player but when im installing it using npm pacakage its does not provide its inbuilt css how i can add inbuilt css of video.js, instead of control bar im getting something like shown in picture below

import React, { Component } from 'react';
import videojs from 'video.js';
import { sendData } from '../../analytics/sendData';

 class Video360Player extends Component {
    componentDidMount() {
        // instantiate Video.js
        const videoJsOptions = {
            autoplay: true,
            controls: true,
            sources: [{
              src: this.props.videoUrl,
              type: 'video/mp4'
            }]
          }
        this.player = videojs(this.videoNode, videoJsOptions,this.props, function onPlayerReady() {
          console.log('onPlayerReady', this)
        });
      }
    
      // destroy player on unmount
      componentWillUnmount() {
        if (this.player) {
          this.player.dispose()
        }
      }
    
      // wrap the player in a div with a `data-vjs-player` attribute
      // so videojs won't create additional wrapper in the DOM
      // see https://github.com/videojs/video.js/pull/3856
      render() {
        return (
          <div> 
            <div data-vjs-player>
              <video ref={ node => this.videoNode = node } className="video-js"></video>
            </div>
          </div>
        )
      }}
export default Video360Player

Answer 1

Add the following line on top of component file:

import 'video.js/dist/video-js.css';

As pointed here: https://docs.videojs.com/tutorial-react.html