javivelasco / react-css-themr

Easy theming and composition for CSS Modules.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how to override styling in default css for a themed component

idavollen opened this issue · comments

quotation from README, "There are three possible sources for your component. Sorted by priority: context, configuration and props" hints to me that theme in context has lowest priority, then configuration(local theme or default theme) with higher priority, right?

Given that I decorated my Button react component (@TheMr("MyButton", defaultTheme)) with default.css

.button { background-color: blue; color: white }
and then I've got a customer.css to customize that button:
.button { background-color: #003366; color: red }

the customer.css was imported and sent in as context theme to Button component.
I am wondering how I could override the default theme with the theme in context? It seems impossible at all because context them has lower priority than localTheme (default.css)

The other issue is that if { composeTheme: 'deeply' } is being used, both context theme and local theme(default.css) has background-color, the final visual background result of button is dependent/undetermined for it depends on the order of who comes after whom in bundled resource

Should context theme have higher priority then local theme so that it is easier to override the default one with context theme?

Thanks in advance!