Is it possible to style the User Interface with custom css (Fixture Tree View, Fixture Bookmarks, Responsive Preview, etc)

[maxill1]

I'm condidering switching from storybook to react-cosmos and I'd like to change global style of the react-cosmos-ui, which is black/grey/white based.

Searching the code, i found out that react-cosmos-ui is responsible for defining colors in colors.ts and globalStyle.ts, but its not clear to me if those definitions could be overriden with cosmos.config.json.

I tried using "globalImports" with css but those apply to the fixtures and not the react-cosmos-ui.
According to json schema "ui" only has "responsivePreview" option.

[ovidiuch]

@maxill1 There's no clear way to override UI styles at the moment.

One way I can think of is to create a minimal UI plugin that injects global CSS: https://github.com/react-cosmos/react-cosmos/blob/main/docs/plugins/ui-plugins.md

The problem with this approach is that the UI is styled using styled components so you'd have to target generated class names that could change in a future updates.

[tsanyqudsi]

we can put id in the tag created by styledcomponents and let the css target those ids.

even if there's something like

<MyComponent id="myUniqueId-1">Content goes here</MyComponent>
<MyComponent id="myUniqueId-2">Content goes here</MyComponent>

we can use

[id^="myUniqueId-"] {
  /* Your styles for elements with id starting with "myUniqueId-" */
}

on the css.

The browser will prioritize the css designated to #id instead of .class.