Default styles for components are difficult
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
When I have a component which wraps a component with the intention of putting some default styles on it, e.g.
```
class FooterLink extends React.Component {
render() {
let {className, ...props} = this.props;
className = [className, css(styles.footerLink)].join(' '); // how to merge?
return ;
}
```
it's not obvious how to merge the class names. If you simply use both of the generated class names (as in the code above), there is no way to enforce precedence (later injected style wins, presumably). Of course you could allow an array of style objects to be passed in and then `css` them all together, but this changes the API so the component isn't really a pure wrapper anymore.
Any thoughts on this?
Contributor guide
No contributing guide indexed for this repository
Research direction
No file or test is named; start by tracing the css(styles.footerLink) call and the className handling in the wrapper example. Done means a decided approach for applying default styles while preserving the pure-wrapper API, with the behavior documented or implemented as appropriate.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100