We externalized a couple of React Components from our React App to be able to use them in a second App. To compile the (TSX) components we are running tsc and babel and as a result get JS files calling React's createElement in the "dist" directory.
These components are npm installed to the App project and run pretty fine.
Now, we want to make these Components customizable/themable. Is there a state of the art approach? It seems to be hard to find information regarding Components which are not in the same project as the App.
A first idea was to use CSS Custom Properties. This works quite well from both perspectives: the Component author as well as its user. The Component author adds a "customizing hook" by inserting var(--component-element-modifier, red) for the corresponding CSS value and if the Component user wants to change it, a --component-element-modifier: blue does the trick.
But: CSS Custom Properties are evaluated during runtime. Which of course is quite cool to play around with. But with increasing Custom Properties might have a serious performance impact.
As we use SASS for styling, I just tried to use SASS variables as we would do with CSS Custom Properties.
//Button.module.scss
$button-background: fuchsia !default;
.button {
background-color: $button-background;
}
//App.module.scss
//Does not work
$button-background: yellow;
SASS just seems to ignore the new $button-background. I guess it might need to draw a connection between the two files (other than CSS Custom Properties we speak of compilation here), so I tried that:
//App.module.scss
// Does also not work
@use "~@newlukai/components-module/dist/components/Button/Button.module" with (
$button-background: pink
);
But, well. That also does not work.
A usual approach seems to be to propagate theme settings via properties. But it seems wrong to me to mix styling and configuration.
