Minimal CSS/Isolated styles

[dainius-gudavicius]

Description 📝

There's a need for isolated styles that do not affect root/parent project. Component styles works good if the app itself is root, but causes issues if it is integrated in another project.

Suggested solution 💡

To create styles isolated to component.

Alternative ⛕

No response

Additional context ☝️

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

[agviegas]

Hey @dainius-gudavicius right now we are using tailwind for styling the viewer. Can you elaborate a bit more on the issues you are encountering, so that we can fix them?

[dainius-gudavicius]

Hi, @agviegas , The issue is that design bleeds to parent project if used as a component. Speaking about SharePoint integration, it affects all. sliders, buttons, table components of Sharepoint.
Here's a quick example of tooeen.css affected slider in SP:

I simply import.css to project:
import React, {useEffect} from "react"; import "./tooeen.css";

[agviegas]

Ok, got it! We will see if we can make the sliders only affect the inner app. Thanks for the info!

[dainius-gudavicius]

Hi, Antonio, I want to make it clear, that it is not only sliders that are affected. Buttons, tables, sliders are the only ones I've noticed. Importing css directly is going to cause such problems. components need to be redone using isolated component styling, using scss modules or similar. https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
Thank you!

[HoyosJuan]

Most of this issue should be resolved by PR #191.