![](/img/trans.png)
[英]Themes for malihu-custom-scrollbar-plugin not working for me
[英]How to customize malihu-custom-scrollbar-plugin in ReactJS?
I'm using malihu-custom-scrollbar-plugin in my ReactJS project, I can customize the scroll bar by editing the css in node_modules, the problem here after an npm install all the changes in node_modules will be gone, I need a way to編輯滾動條拖動器和滾動條軌道的大小、顏色。 還有向上和向下按鈕,在 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>
)
}
我找到的解決方案是覆蓋malihu-custom-scrollbar-plugin中的css,使用元素檢查(F5)我能夠獲得我想要定制的html div,然后在我的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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.