Блог

Я использую плагин malihu-custom-scrollbar-в своем проекте ReactJS, я могу настроить полосу прокрутки, отредактировав css в node_modules, проблема здесь после установки npm все изменения в node_modules исчезнут, мне нужен способ изменить размер, цвет перетаскивателя полосы прокрутки и рельсы полосы прокрутки. также кнопки вверх и вниз, внутри файла src, а не в модулях узлов

Вот код, который я использую для плагина malihu-custom-полоса прокрутки:

 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 = () =gt; {    React.useEffect(()=gt;{  $('.scroll').mCustomScrollbar({  scrollButtons:{enable:true},  theme:"rounded-dots-dark",  scrollInertia:500  }); },[])   return (   lt;Box style={{overflowY: "hidden",  height: "300px"}} className='scroll'gt;  lt;pgt; A long lines of textlt;/pgt;  lt;/Boxgt; ) }  

Решение, которое я нашел, состоит в том, чтобы переопределить css в плагине malihu-custom-scrollbar, используя element Inspect (F5), я смог получить html-раздел, который я хотел настроить, а затем в моем 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 }