reactjs - 试图让 react-perfect-scrollbar 在 React 应用程序中工作

Question

所以我是 React 的新手，正在尝试向应用程序添加滚动条。我已经安装了 react-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。工作 codesandbox code here

示例.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;

例子.scss

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

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

希望对您有所帮助!!!