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

Question

我在我的 ReactJS 项目中使用了 malihu-custom-scrollbar-plugin，我可以通过编辑 node_modules 中的 css 来自定义滚动条，npm install all 后这里的问题node_modules 中的更改将消失，我需要一种方法来编辑滚动条拖动器的大小、颜色和滚动条 rails。还有向上和向下按钮，在 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>
)
}

Answer 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？

How to customize malihu-custom-scrollbar-plugin in ReactJS?

jquery

css

reactjs

scrollbar

mcustomscrollbar