web-dev-qa-db-fra.com

material-ui comment puis-je styliser la barre de défilement avec CSS dans JS?

Je déteste vraiment devoir avoir une feuille de style externe pour mes styles de barre de défilement et je veux la mettre avec le reste de mes styles sur mon composant racine. J'ai essayé ça ...

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'
      }
    }
  });

puis en ajoutant la classe au composant racine div. J'utilise withStyles HOC et les autres styles qui sont appliqués, donc je sais que cela fonctionne, mais je ne sais pas comment accéder aux styles de barre de défilement. Y a-t-il un moyen de faire ça?

<div className={classes.scrollBar} />
reactjsmaterial-uijss
5
deltaskelta

Je recommanderais d'appliquer les styles de barre de défilement uniquement pour le conteneur spécifique, car @Global peut prendre du temps de rendu à s'appliquer sur les éléments All. Cela fonctionne bien pour moi

list: {
  overflowY: "auto",
  margin: 0,
  padding: 0,
  listStyle: "none",
  height: "100%",
  '&::-webkit-scrollbar': {
    width: '0.4em'
  },
  '&::-webkit-scrollbar-track': {
    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(0,0,0,.1)',
    outline: '1px solid slategrey'
  }
}
1
Artem Luzhanovskyi

Pour moi, je voulais juste changer les paramètres de la barre de défilement globalement, donc sur la base de l'exemple fourni ici: typography-html-font-size

Vous pouvez utiliser une approche comme celle-ci pour créer votre thème:

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

Ensuite, passez simplement l'objet créé à ThemeProvider. document ThemeProvider

0
Naeem Baghi