Is it possible to use this without global style overrides?

[christopher-caldwell]

Admittedly, I don't have a ton of experience with Tailwind, so I am not sure if this is on them or with Tremor, but importing Tremor's CSS styles globally the ul and the li elements, which broke some existing things I didn't want styled. Is it possible to scope your styles, or use Tremor without global styles?

[mitrotasios]

hey, @christopher-caldwell, thanks for raising this! We got this feedback a lot, so we are planning to change this as soon as possible. Will keep you posted :)

[GentikSolm]

Also looking forward to this. Designed an entire part of my site with this to find it clashes with chakra's styles, on buttons especially. I tried using reacts CSS module system by exporting all the classes from the CSS file and adding the module extension.

import styles from '@tremor/react/dist/esm/tremor.module.css';

...

const classes = Object.values(styles).join(' ');
return (
        <div className={classes}>
            <Card>
              ...
            </Card>
        </div>
)

While this didn't work, it added some of the styles to some capacity, but nothing was useable—more of a blob of color on the screen. I'm guessing the components depend on stylings higher up in the HTML tree? My ignorance of the inner workings of this stuff might also be the issue here.

[GentikSolm]

After some toying around, I was able to scope the styles in some capacity. This will scope the CSS to any page where a component with the following useEffect is loaded. If you have clashing CSS on the same page, this wont work, but if you have a dashboard with just tremor components on a given page, this should work, albeit very hacky.

import styles from '!!raw-loader!@tremor/react/dist/esm/tremor.css';

...

useEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = styles;
    const _style = document.head.appendChild(style);
    return () => {
        document.head.removeChild(_style);
    };
}, []);

....

NOTE - This does depend on raw-loader. No configuration was needed with CRA, just yarn add raw-loader and use the above code and it should work.

[mitrotasios]

Hey @GentikSolm, thanks for taking the time to dig into this. We are working on the issue currently and hope to resolve it soon by removing the global styles and reduce the CSS scope to Tremor components only.

[GentikSolm]

Looking forward to the update. The library is amazing so far, and am excited to use it in new projects. Thanks for all your hard work!

[mitrotasios]

While this is getting resolved, for anyone using Tailwind in their projects, adding the important: true option to your tailwing.config.js should work as a quick-fix.

[mitrotasios]

We appreciate it @GentikSolm, will keep everyone posted :)

[StefBrands]

While this is getting resolved, for anyone using Tailwind in their projects, adding the important: true option to your tailwing.config.js should work as a quick-fix.

Is there a similar workaround without using Tailwind? Currently can't use Tremor without it breaking my entire sites styling.

[ColaIan]

While this is getting resolved, for anyone using Tailwind in their projects, adding the important: true option to your tailwing.config.js should work as a quick-fix.

Is there a similar workaround without using Tailwind? Currently can't use Tremor without it breaking my entire sites styling.

A wacky way would be to copy tremor.css to another location outside of node_modules, remove everything from line 1 to the line before *, ::before, ::after { (Somewhere around line 382), then use that file instead (It might still override some other things but you will have to figure out what to remove and what not for your use case)

[mitrotasios]

yeah, sorry about that! We are trying to publish the new release with a fix this week.

[mitrotasios]

Hi everyone, a beta version of v1.0.8 which includes the fix for the global styles issue has been released. You can npm install it with npm i @tremor/react@beta or npm i @tremor/[email protected] while we are testing if everything works fine. Please let us know if everything works as expected for you, if you get the chance and report any bugs that you may encounter 😊

[StefBrands]

Hi everyone, a beta version of v1.0.8 which includes the fix for the global styles has been released. You can npm install it with npm i @tremor/react@beta or npm i @tremor/[email protected] while we are testing if everything works fine. Please let us know if everything works fine if you get the chance and report any bugs that you may encounter 😊

So far it is looking great, haven't encountered any bugs yet. Thanks all!

[mitrotasios]

This issue should now be fixed with release v1.0.8: Release Announcement