Tinacms: TinaCMS Sidebar inherits site CSS styles

[employee451]

Description

The sidebar is inherting styles from imported stylesheets. Specifically, the heading and paragraph tags seem to have their color set to inherit. This causes them to inherit the colors from other stylesheets.
A nice solution would be to set an id for the sidebar container. This would allow complete customisation of the sidebar styling.

Steps to reproduce

1. Open the CodeSandbox I made to demonstrate the issue.
2. Open the TinaCMS sidebar.
3. The title and text have turned white, as is written for headings and p tags in the style.css file.

Expected result

The sidebar should have all of it's CSS values set to a specific value, which shouldn't be inherited from other stylesheets.

Actual result

The elements of the sidebar inherit some of their values from other stylesheets which have been imported.

Environment

Tinacms Package Versions

tinacms version 0.15.0

Tools

Whatever CodeSandbox uses.

[spbyrne]

Good catch. We had been wrapping the sidebar in an iFrame, so after we removed that there's been a few issues pop up. We'll have to carefully consider a possible solution. Really inherit isn't the issue in this example given you have !important on your color declarations. If you remove the !important only the paragraph is affected, which doesn't have inherit set. We could simply be more heavy handed with our styling but I'm not sure if that's the right approach.

[employee451]

Good point about important having been set.
I'm no CSS expert, but could an option be to use all:inital on the parent element of Tina and then apply all:unset on the children? An article has been written on this on CSS-Tricks.
This would "isolate" the Tina components, letting their styles be set completely from scratch.

[spbyrne]

The all property is a revelation to me, thank you! You're right. I think that's a great approach.