如何在 ReactJS 中自定义 malihu-custom-scrollbar-plugin?

Posted

技术标签:

【中文标题】如何在 ReactJS 中自定义 malihu-custom-scrollbar-plugin?【英文标题】:How to customize malihu-custom-scrollbar-plugin in ReactJS? 【发布时间】:2022-01-13 07:33:01 【问题描述】:

我在我的 ReactJS 项目中使用 malihu-custom-scrollbar-plugin,我可以通过编辑 node_modules 中的 css 来自定义滚动条,npm install 后这里的问题 node_modules 中的所有更改都会消失,我需要一种编辑滚动条拖动器的大小、颜色和滚动条导轨的方法。还有向上和向下按钮,在 src 文件中,而不是在节点模块中

这是我用于 malihu-custom-scrollbar-plugin 的代码:

import Box from '@mui/material/Box'
import $ from 'jquery';
import 'malihu-custom-scrollbar-plugin';
import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css';
require('jquery-mousewheel');

const ListComponent = () => 



React.useEffect(()=>
    $('.scroll').mCustomScrollbar(
        scrollButtons:enable:true,
        theme:"rounded-dots-dark",
        scrollInertia:500
      );
,[])

 return (             
            <Box style=overflowY: "hidden",
            height: "300px" className='scroll'>
            <p> A long lines of text</p>
            </Box>
)

【问题讨论】:

【参考方案1】:

我找到的解决方案是覆盖malihu-custom-scrollbar-plugin中的css, 使用 element Inspect (F5) 我能够获得我想要自定义的 html div,然后在我的 App.css 中添加 !important 来覆盖它:

.mCS-rounded-dark-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar
  background-color: red!important; //change the color of the dragger bar
  width: 20px!important; // change the width of the dragger bar
  height: 20px!important; //// change the height of the dragger bar

【讨论】:

以上是关于如何在 ReactJS 中自定义 malihu-custom-scrollbar-plugin?的主要内容,如果未能解决你的问题,请参考以下文章

如何在具有 reactstrap 依赖项的 reactjs 应用程序中自定义 bootstrap 4?

如何在 BlackBerry 中自定义 ListField?

如何在Android中自定义动画

如何在 Qt 中自定义列表视图

如何在 JavaScript 中自定义警报?

如何在 Flutter 中自定义 Slider 小部件?