title: how to fix css of video.js package in reacttjs
body: <p>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</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
            &lt;div&gt; 
              &lt;div data-vjs-player&gt;
                &lt;video ref={ node =&gt; this.videoNode = node } className="video-js"&gt;&lt;/video&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )
        }}
  export default Video360Player</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/p6A3c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p6A3c.png" alt="enter image description here" /></a></p>