Material-UI, как я могу стилизовать полосу прокрутки с помощью CSS в JS?

Question

Мне очень не хочется иметь внешнюю таблицу стилей для моих стилей полосы прокрутки, и я хочу добавить ее вместе с остальными моими стилями в мой корневой компонент.Я пробовал это ...

const styles = (theme: Theme) =>
  createStyles({
    scrollBar: {
      '&::-webkit-scrollbar': {
        width: '0.4em'
      },
      '&::-webkit-scrollbar-track': {
        '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
      },
      '&::-webkit-scrollbar-thumb': {
        backgroundColor: 'rgba(0,0,0,.1)',
        outline: '1px solid slategrey'
      }
    }
  });

и затем добавление класса в корневой компонент div.Я использую withStyles HOC и другие стили, которые там применяются, поэтому я знаю, что это работает, но я не могу понять, как добраться до стилей полосы прокрутки.Есть ли способ сделать это?

<div className={classes.scrollBar} />

Answer 1

Для меня я просто хотел изменить настройки полосы прокрутки глобально, поэтому, основываясь на приведенном здесь примере: typography-html-font-size

Вы можете использовать такой подход, как этотпостроение вашей темы:

createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '*': {
          'scrollbar-width': 'thin',
        },
        '*::webkit-scrollbar': {
          width: 4px,
          height: 4px,
        },
      },
    },
  },
})

Затем просто передайте созданный объект в ThemeProvider. ThemeProvider document

Answer 2

Поскольку вы хотите сделать это глобально, вы можете захотеть следовать тому, что CssBaseline делает в нем исходный код: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js

const styles = theme => ({
  '@global': {
    '*::-webkit-scrollbar': {
      width: '0.4em'
    },
    '*::-webkit-scrollbar-track': {
      '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
    },
    '*::-webkit-scrollbar-thumb': {
      backgroundColor: 'rgba(0,0,0,.1)',
      outline: '1px solid slategrey'
    }
  }
});

это похоже на верхний уровень /Глобальный селектор для использования @global.