Within my file themeConfig.js, I have defined several theme variables that are utilized to style different components throughout my application. Among these variables, there is a need for implementing the -webkit scrollbar styles for certain components. Due to the length and bulkiness of the -webkit styles, I am interested in incorporating them directly into my themeConfig.js file. These scrollbar styles involve pseudo-elements, and while they can be assigned, I am encountering difficulties in applying them within 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
I am looking for a way to encapsulate this code snippet as a variable in my theme file and apply it to components:
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,
},
However, the method in which theme styles are defined in makeStyles involves a one-to-one property assignment, leaving me unsure about how to efficiently apply an entire style object like this to a component. Any guidance on this matter would be greatly appreciated!