javivelasco / javivelasco/react-css-themr

how to override styling in default css for a themed component

Open
#85 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
589
Forks
65
PR merge metrics
No merged PRs in 30d

Description

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!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the README's stated priority order and trace how the decorated Button receives context, configuration, and props themes. Reproduce the default.css and customer.css example, including composeTheme: 'deeply', and determine whether the issue should clarify or change precedence so the context theme can override the default theme.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.