Imported styles are not contained to the side nav.

[DrewBefore]

Could you wrap your styles into a class that only effects the sidenav? Right now, after importing import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css; The styles that are imported are very generic, and are overwriting styles of the app. Ideally the styles imported would all be contained within the component, or prefixed with .side-navigation-panel.

It is currently styling things such as body, html, img, all heading levels etc.

[abhijithvijayan]

Sure, it is planned to separate css and drop tailwind.

There is now already prefixed classes.

[DrewBefore]

There are already prefixed classes? Do you mean when you write additional css in tailwind? I'm talking about the the styles that are included by default.

The built ReactMinimalSideNavigation.css from node_modules file that is generated looks like this with no prefixes :

html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } ... (and much more)

Since it is required to be imported straight into the project, all those styles are being inherited by the entire application.

[abhijithvijayan]

Related to #4

[abhijithvijayan]

This might cause unintended side effects when base styles are removed

[abhijithvijayan]

fixed in v1.7.0