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

Question

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 edit the size, the color of the scrollbar dragger and the scrollbar rails. also the up and down buttons, inside the src file and not in node modules

Here is the code I'm using for 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>
)
}

score 0 · Accepted Answer · answered Dec 09 '21 at 15:06

The solution I found is to override the css in the malihu-custom-scrollbar-plugin, using element Inspect (F5) I was able to get the html div I wanted to customize, and then in my App.css I added !important to override it:

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

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

1 Answers1