Add support for JS notation styles to styled API
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 413
- PR merge metrics
- No merged PRs in 30d
Description
## Describe the feature
Currently the `styled` API accepts literal tagged template literals which accepts CSS naming scheme for styles.
I think we could also extend the API to accept valid CSS styles in JavaScript notation too!
## Motivation
1. React Native devs would appreciate it.
2. Some people like styling in JS way.
3. More options for people to choose.
## Possible implementations
Something similar to how emotion does,
```
const StyledHeading = styled('h1')(() => ({
fontSize: '24px'
});
```
`props` or `theme` from a `ThemeProvider` can be passed to the callback function for easy access.
```
const StyledHeading = styled('h1')(({ theme, color }) => ({
fontSize: '24px',
...( color && { color })
});
```
## Related Issues
Contributor guide
Assessment
This issue has not been assessed yet.