如何在ReactJS中自定义malihu自定义滚动条插件

Question

我在ReactJS项目中使用了malihu自定义滚动条插件，我可以通过编辑node_modules中的css来自定义滚动条，在npm安装后，node_module中的所有更改都会消失，我需要一种方法来编辑滚动条拖动器和滚动条轨道的大小、颜色。还有向上和向下按钮，在src文件中，而不是在节点模块中

以下是我为malihu自定义滚动条插件使用的代码：

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自定义滚动条插件中的css，使用元素Inspect(F5(，我可以获得我想要自定义的htmldiv，然后在我的App.css中添加！重要的是要覆盖它：

.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
}