#jquery #css #reactjs #scrollbar #mcustomscrollbar
#jquery #CSS #реагирует на #полоса прокрутки #mcustomscrollbar
Вопрос:
Я использую плагин 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; ) }
Ответ №1:
Решение, которое я нашел, состоит в том, чтобы переопределить 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 }