Я использую 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, и как это лучше всего сделать.

Также, пожалуйста, дайте мне знать, если я здесь делаю что-то не так. Заранее спасибо.