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

由于要全局执行此操作，因此您可能希望遵循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。

Answer 2

我建议仅将滚动条样式应用于特定的容器，因为@Global可能需要花费渲染时间才能将其应用于All元素。对我来说这很好

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

Answer 3

对我来说，我只想全局更改滚动条设置，因此基于此处提供的示例： typography-html-font-size

您可以使用类似的方法来构建主题：

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

然后将创建的对象传递给ThemeProvider。 ThemeProvider document

Answer 4

最简单的方法是在您的 app.css 文件中使用以下代码并将其导入到您的 App.js 中：

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

material-ui如何在JS中使用CSS设置滚动条样式？

4 个答案: