MUI - 如何在 JS 中使用 CSS 设置滚动条的样式？
Posted
技术标签:
【中文标题】MUI - 如何在 JS 中使用 CSS 设置滚动条的样式？【英文标题】：MUI - How can I style the scrollbar with CSS in JS? 【发布时间】：2019-05-15 07:03:16 【问题描述】：我真的很讨厌我的滚动条样式必须有一个外部样式表，我想将它与我的根组件上的其余样式一起放入。这个我试过了……
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 />
【问题讨论】：
是关于css的问题吗？还是以编程方式做某事的技术？ 问题是关于如何在 JSS 中做到这一点。我知道 CSS 有效 我根本不清楚您要达到的目标。通常 CSS 类是在开发过程中定义的，并以编程方式应用/删除。你想做什么？ 我试图通过 JSS 应用这些样式，因为我的其余样式都是 JSS。我不想让 css 在我的代码库中分散在不同的地方。我可以使用导入的样式表应用这些样式，但我不知道如何通过 JSS 实现它们 啊，所以您的问题更多是与 JSS 相关的。我使用 SASS，所以我无能为力。 :( 【参考方案1】：const useStyles = makeStyles((theme) => (
DetailedCard:
height: theme.spacing(60),
display: 'flex',
flexDirection: 'column',
overflow: 'scroll',
'&::-webkit-scrollbar':
display: 'none'
,
,
))
【讨论】：
【参考方案2】：你甚至不需要使用createTheme，只需在MUI v5中使用GlobalStyles，这样更可重用：
<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() />
现场演示
【讨论】：
【参考方案3】：之前的 4 个答案都没有提供一个简单的复制/粘贴解决方案，可以立即适用于 mui 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",
,
,
,
,
,
);
【讨论】：
【参考方案4】：此配置适用于现代 Chrome 和 Firefox 浏览器上的 Material UI v4。
const theme = createTheme(
overrides:
MuiCssBaseline:
'@global':
'*':
scrollbarWidth: 'thin',
scrollbarColor: '#B7B7B7 transparent',
'&::-webkit-scrollbar':
width: 6,
height: 6,
backgroundColor: 'transparent',
,
'&::-webkit-scrollbar-track':
backgroundColor: 'transparent',
,
'&::-webkit-scrollbar-thumb':
borderRadius: 6,
backgroundColor: '#B7B7B7',
minHeight: 24,
minWidth: 24,
,
'&::-webkit-scrollbar-thumb:focus':
backgroundColor: '#adadad',
,
'&::-webkit-scrollbar-thumb:active':
backgroundColor: '#adadad',
,
'&::-webkit-scrollbar-thumb:hover':
backgroundColor: '#adadad',
,
'&::-webkit-scrollbar-corner':
backgroundColor: 'transparent',
,
,
,
,
,
);
【讨论】：
【参考方案5】：最简单的方法是在您的 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;
【讨论】：
【参考方案6】：对我来说，我只想全局更改滚动条设置，因此基于此处提供的示例： typography-html-font-size
您可以使用类似这样的方法来构建您的主题：
createMuiTheme(
overrides:
MuiCssBaseline:
'@global':
'*':
'scrollbar-width': 'thin',
,
'*::-webkit-scrollbar':
width: '4px',
height: '4px',
)
然后将创建的对象传递给ThemeProvider。 ThemeProvider document
【讨论】：
【参考方案7】：我建议仅对特定容器应用滚动条样式，因为 @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'
【讨论】：
一切都在这里，除了&和::之间的空格。【参考方案8】：
由于您想在全球范围内执行此操作，您可能需要遵循 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。
【讨论】：
我实际上也刚刚发现了这一点，并回到这里写下我自己的答案。尽管我必须将& 更改为 * 才能使其正常工作。您能否将您的答案更改为使用*，我会接受。谢谢！
是的，有道理，& 来自 CssBaseline.js（这在他们的情况下也很有意义）
我怎样才能只隐藏单个组件的滚动？我尝试用我的选择器名称更改global 并将代码直接放在选择器中。但两者都失败了。
删除 outline: 1px solid slategrey 以获得更好的外观，也适用于 safari。
先生，我正在寻找完全相同的问题，但我很困惑如何将滚动条类与其余代码集成，请您解释一下以上是关于MUI - 如何在 JS 中使用 CSS 设置滚动条的样式？的主要内容，如果未能解决你的问题，请参考以下文章