I have set up an NX project that consists of 2 very similar NextJS apps. These 2 NextJS apps will share a lot of code, especially components, but they will have their own styling of the components. The shared components will be in a separate package, an NX library called "lib", that each app will import components from.
I need help with how I should handle the styling in each of the apps. For instance, both app1 and app2 should be able to import a "Button" component from "lib", but they should be able to set their own styling to the "Button" component.
A couple of important things:
- Each app should be able to have its own style on imported shared components.
- When an app doesn't have specific styling for a shared component, default styles should apply
- Some shared components might be more complex, containing several other shared components. For instance, a shared "Card" component might render a shared "Button" component, a shared "Image" component etc. Each shared component, even if it is nested, should be possible to be styled by the app importing it.
I am using CSS modules and SCSS. I don't want to use styled components or tailwind etc.
How should I set up the styling in this project to achieve all of the above?
