Попытка заставить работать реагирующую-идеальную полосу прокрутки в приложении React

Question

Так что я новичок в React и пытаюсь добавить полосу прокрутки в приложение. Я установил response-perfect-scrollbar и импортировал его в свое приложение. После выполнения указанных инструкций я не могу отобразить полосу прокрутки ... Я предполагаю, что делаю очень простую ошибку, но не могу ее исправить. Я пока не пытаюсь настроить пользовательские параметры или что-то еще, я просто пытаюсь отобразить полосу прокрутки

import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';

<PerfectScrollbar>
    <p> test 1 </p>
    <p> test 2 </p>
</PerfectScrollbar>

Answer 1

Вы не предоставляете правильные CSS для полосы прокрутки, которая будет показана.Рабочие коды и код коробки здесь

Example.js

import React, { Component } from "react";
import ScrollBar from "react-perfect-scrollbar";
import "react-perfect-scrollbar/dist/css/styles.css";

import "./example.scss";

class Example extends Component {
  render() {
    return (
      <div className="example">
        <ScrollBar component="div">
          <div className="content" />
        </ScrollBar>
      </div>
    );
  }
}

export default Example;

example.scss

.example {
  width: 400px;
  height: 400px;

  .content {
    background: green;
    width: 800px;
    height: 480px;
  }
}

Надеюсь, что поможет !!!

Answer 2

Вы пытались положить свои вещи в DIV?

import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';

<PerfectScrollbar>
<div>
   <p> test 1 </p>
   <p> test 2 </p>
</div>
</PerfectScrollbar>