Imagine you have two distinct functions (or more) that take one argument from an executor and return the result object. Let's illustrate this with an example:
const style_1 = theme => ({
header : {
color : theme.primary
}
})
const style_2 = theme => ({
header : {
backgroundColor : theme.secondary,
color : "red"
}
})
You want to execute these functions and merge the resulting objects into one! When dealing with objects, it's a simple task as shown below:
const style_1 = {
header : {
color : theme.primary
}
}
const style_2 = {
header : {
backgroundColor : theme.secondary,
color : "red"
}
}
const res = {...style_1, ...style_2}
The expected result is:
{
header :
{
backgroundColor : "black",
color : "red"
}
}
However, when working with functions, things can get a bit tricky.
So the question arises: Is it possible to implement what I want? (using Lodash or any other method)
I thought of creating something like this:
const style_1 = theme => ({
header : {
color : theme.secondary
backgroundColor : "black"
},
footer : {
color : "purple"
}
})
const style_2 = (theme, extendStyles) => {
const extendStyles = extendStyles(theme);
return {
header : {
color : theme.primary,
...extendsStyles.header
},
...extendStyles
}
}
However, this solution seems a bit cumbersome as I need to manage this in every style that could potentially be overridden. Are there any utilities/helpers that can make this process smoother?
P.S. I'm exploring this "withStyle" feature of MaterialUI and trying to figure out the best approach to handle it.
Thank you for any assistance.