under this link: https://mui.com/styles/advanced/#theme-nesting I found a guide to customize theming…
I was just wondering about that code part:
<ThemeProvider
theme={(outerTheme) => ({
...outerTheme,
background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',
})}
>
Where you basically pass a function callback to the theme property, that returns an object (with the old ...outertheme props passed to the function and getting destructured and extended..)
I was wondering how was that construct called again and how does it work behind the scenes? I think there was somethign similar in React called render props, where you pass a function to a component property that returns a JSX Expression, but that function gets passed some property from the parent component, that gets that function passed as a child and executes the function but passes additional parameters beforehand to the function as the render props. Is that right?
<Component someThing={property => (<p>This is some {property}</p>)} />
and in Component:
({someThing}) => (...create `property`, return (someThing(property)))