Я использую Material-UI v5 для своего проекта. Мне нужно оформить свои полосы прокрутки с помощью следующего css
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
background: blue;
}
body::-webkit-scrollbar-thumb {
background-color: red;
border: 3px solid black;
border-radius: 10px;
}
Я попытался использовать стили макияжа следующим образом:
const useStyles = makeStyles((theme: Theme) => ({
root: {
background: theme.palette.primary.main,
'html': {
scrollbarWidth: 'thin',
scrollbarColor: theme.palette.accent.main
},
'body::-webkit-scrollbar': {
width: '12px'
},
'body::-webkit-scrollbar-track' : {
background: theme.palette.primary.main,
}
},
}));
Но когда я проверил фактический исходный css, он пришел как 'body::-webkit-scrollbar' : Object[object]
.
Я застрял на том, как добавить глобальный css, подобный этому, в material-ui, и как это лучше всего сделать.
Также, пожалуйста, дайте мне знать, если я здесь делаю что-то не так. Заранее спасибо.