material-ui如何在JS中使用CSS设置滚动条样式？
del*_*lta 4 reactjs material-ui jss
我真的很讨厌必须为滚动条样式创建一个外部样式表，并且希望将其与其余样式一起放入根组件中。我已经尝试过了...
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} />
fat*_*ess 34
前面的 4 个答案都没有提供一个可以立即适用于 Material UI v4 或 v5 和CssBaseline的简单复制/粘贴解决方案的简单复制/粘贴解决方案。所以这是我的
对于 v4：
import { createTheme } from "@material-ui/core/styles";
const theme = createTheme({
overrides: {
MuiCssBaseline: {
"@global": {
body: {
scrollbarColor: "#6b6b6b #2b2b2b",
"&::-webkit-scrollbar, & *::-webkit-scrollbar": {
backgroundColor: "#2b2b2b",
},
"&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
borderRadius: 8,
backgroundColor: "#6b6b6b",
minHeight: 24,
border: "3px solid #2b2b2b",
},
"&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
backgroundColor: "#2b2b2b",
},
},
},
},
},
});
export default theme;
所以，如果你使用CssBaseline因此，如果您在应用程序顶部
如果您掌握了 mui v5，请在您的全局主题中使用它：
// optional for better type support
import type {} from "@mui/lab/themeAugmentation";
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
body: {
scrollbarColor: "#6b6b6b #2b2b2b",
"&::-webkit-scrollbar, & *::-webkit-scrollbar": {
backgroundColor: "#2b2b2b",
},
"&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
borderRadius: 8,
backgroundColor: "#6b6b6b",
minHeight: 24,
border: "3px solid #2b2b2b",
},
"&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
backgroundColor: "#2b2b2b",
},
},
},
},
},
});
- 只需复制并粘贴 v5，完美运行，零问题。 (5认同)
Art*_*kyi 27
我建议只为特定容器应用滚动条样式，因为 @Global 可能需要渲染时间来应用所有元素。这对我来说很好用
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'
}
}
Nae*_*ghi 15
对我来说，我只想全局更改滚动条设置，因此基于此处提供的示例： typography-html-font-size
您可以使用这样的方法来构建您的主题：
createMuiTheme({
overrides: {
MuiCssBaseline: {
'@global': {
'*': {
'scrollbar-width': 'thin',
},
'*::-webkit-scrollbar': {
width: '4px',
height: '4px',
}
}
}
}
})
然后只需将创建的对象传递给ThemeProvider. 主题提供者文档
小智 12
在 Material UI v5 中，对于特定元素，您可以简单地使用：
<Box sx={{
overflow:"auto",
scrollbarWidth: 'thin',
'&::-webkit-scrollbar': {
width: '0.4em',
},
'&::-webkit-scrollbar-track': {
background: "#f1f1f1",
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#888',
},
'&::-webkit-scrollbar-thumb:hover': {
background: '#555'
}
}}>
</Box>
由于您想在全球范围内执行此操作，因此您可能需要遵循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。
- 我实际上也刚刚发现了这一点，并回到这里来写我自己的答案。尽管我必须将 `&` 更改为 `*` 才能使其正常工作。您能否将您的答案更改为使用 `*`，我会接受它。谢谢！ (2认同)
最简单的一种是在 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;
}
你甚至不需要使用createTheme，只需GlobalStyles在MUI v5中使用即可，这样可重用性更高：
<GlobalStyles
styles={{
'*::-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',
},
}}
/>
或者，如果您想在深色主题中使用滚动条，MUI 为您提供了一个开箱即用的滚动条：
import darkScrollbar from '@mui/material/darkScrollbar';
<GlobalStyles styles={{ ...darkScrollbar() }} />
现场演示
2022 年 3 月更新
在 MUI@5 中，实现滚动调整为深色/浅色主题的最简单方法是使用CssBaseline中的配色方案，该方案适用于 Chrome、Edge 和 FF
https://mui.com/components/css-baseline/#color-scheme
<CssBaseline enableColorScheme />
适用于 Chrome、Edge、FF 和 Safari 的浅色/深色模式的细滚动条 CSB：
https://codesandbox.io/s/material-ui-toggle-dark-light-mode-scrollbar-t542f7?file=/demo.tsx
更多细节：
如果你想要漂亮的薄滚动，你可以使用滚动宽度：“thin”
https://caniuse.com/mdn-css_properties_scrollbar-width
但目前仅适用于 FF
MUI 中的darkScrollbar在 Edge 和 Chrome 中制作了漂亮的细深色滚动条，但在 FF 中则不然
darkScrollbar还有 3 个可用选项，因此我们可以结合这两种方法并为浅色模式传递灰色：
import { grey } from "@mui/material/colors";
import { darkScrollbar } from "@mui/material";
...
MuiCssBaseline: {
styleOverrides: {
html: {
...darkScrollbar(
mode === "light"
? {
track: grey[200],
thumb: grey[400],
active: grey[400],
}
: undefined
),
//scrollbarWidth for Firefox
scrollbarWidth: "thin",
},
},
},
| 归档时间： |
|
| 查看次数： |
6973 次 |
| 最近记录： |