Using the hooks API in a Component Library - support passing classes to the useStyles hook and merging the classes
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
*The problem*
We currently use react-jss as our styling system in our in house component lIbrary which packages and publishes components on a private feed similar to npm. We have other applications that consume the component library, some that also use react-jss and some that use css modules.
react-jss has worked well as the withStyles HOC allows the apps to pass additional classes to each component and withStyles will merge these classes in. This means both set of CSS rules will be sent to the browser and applied in cascading order.
The new hooks API however has dropped support for classes and is not backwards compatible.
A possible alternative using JS object merging has been discussed here https://github.com/cssinjs/jss/issues/1221. Notice in this solution the CSS rule set it replaced completely but usually the consumer only wants to override one or two CSS properties. The current system of classes and withStyles is more powerful and allows for finer grained control over which properties are to be overridden.
*The potential solution*
The useStyles hook would treat classes as a "magic" parameter similar to withStyles. If provided useStyles would merge these classes with the new classes it creates internally.
*Implementation*
If this sounds like something we want to keep in scope for react-jss I will have a go at implementation. If not we will write our own createUseStyles wrapper which is specific to our solution that uses the "classes" convention.
Contributor guide
Research direction
Start by comparing the hooks API's useStyles behavior with the existing withStyles classes behavior described in the issue. Review the react-jss implementation and its tests, then define coverage for passing a classes parameter and merging it without replacing unrelated rules. Done means the supported classes behavior is documented by tests and works for component-library consumers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100