I am currently facing an issue where I need to share styles across my entire web application.
Here is the Problem: I have been using makeStyles in a repetitive manner as shown below:
In component_A.js
const useStyles = makeStyles({
specific_style: {
padding: '24px',
// etc.
}
})
function foo() {
const classes = useStyles();
return (
<div className={classes.specific_style}>This is a styled div</div>
)
}
In component_B.js
const useStyles = makeStyles({
specific_style: {
padding: '24px',
// etc.
}
})
function bar() {
const classes = useStyles();
return (
<div className={classes.specific_style}>This is another styled div</div>
)
}
This has resulted in a lot of duplicated code in my project and I believe there must be a more efficient way to handle this. I have considered utilizing a theme to store these classes and accessing them like {theme.specific_style}. However, my attempts thus far have not been successful.
Can someone provide me with a concrete example or solution for achieving this? :)
Possible solutions that I have explored:
- While native CSS can achieve this, it doesn't align with my preferred approach.
- Another option could be to separate the style classes into their own
.jsfile and import them when needed. However, considering that I already have access to the theme, it seems logical for these styles to reside within the theme.