在我的文件 themeConfig.js
中,我声明了一些主题变量,我在整个应用程序中使用这些变量来设置各种组件的样式。我需要使用滚动条 -webkit
来为某些组件保留滚动条。 -webkit
样式又长又笨重,因此我希望能够将它们添加到我的 themeConfig.js
文件中。这些滚动条样式是伪元素,虽然我可以分配它们,但我一直无法弄清楚如何在 themeConfig.js
中使用它们。
themeConfig.js
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
...
}
})
export default myTheme
ComponentExample.js
import { makeStyles } from '@material-ui/core'
const ComponentExample = () => {
const classes = useStyles()
return (
<div className={classes.mainDiv}>I'm a div</div>
)
}
const useStyles = makeStyles(theme => ({
mainDiv: {
height: theme.layout.mainDivHeight,
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-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,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
}
}))
export default ComponentExample
如果我可以将其填充到我的主题文件中的一个变量中并将其应用于组件,那就太好了:
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-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,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
但是在 makeStyles
中声明主题样式的方式存在 1:1 属性分配,我不知道如何优雅地将整个样式对象应用于组件。非常感谢任何建议!
最佳答案
makeStyles
中声明的样式在一个对象中,并且该对象可以用 JavaScript 支持的任何方式构造。我处理这个问题的方法是将您要使用的样式放在主题中的单个对象中(下面示例中的 scrollbarStyles
),然后使用 object spread syntax在 makeStyles
中您想要使用它的地方。
这是一个工作示例:
import React from "react";
import {
createMuiTheme,
ThemeProvider,
makeStyles
} from "@material-ui/core/styles";
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
scrollbarStyles: {
overflowY: "scroll",
"&::-webkit-scrollbar": {
width: 8
},
"&::-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,.2)",
outline: "1px solid slategrey",
borderRadius: 7
}
}
}
});
const useStyles = makeStyles(theme => ({
mainDiv: {
...theme.layout.scrollbarStyles,
height: theme.layout.mainDivHeight
}
}));
function ComponentExample() {
const classes = useStyles();
return (
<div className={classes.mainDiv}>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
</div>
);
}
export default function App() {
return (
<ThemeProvider theme={myTheme}>
<ComponentExample />
</ThemeProvider>
);
}
关于javascript - 我可以将伪元素对象添加到 Material UI 自定义主题配置吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61562766/