🏃♀ Dynamic Styles

Create dynamic stylesheets
and link them to functional components using the React hook
pattern.
- ✅ Build on top of
@emotion/react
: As fast and lightweight as emotion - ✅ Supports all emotion features: lazy evaluation, dynamic theming, etc.
- ✅ Fully featured TypeScript support
- ✅ Server side rendering support: Next.js, Gatsby or any other environment
- ✅
@emotion
cache support - 🟨 Well tested (working on it)
`
jsx // Create dynamic stylesheet that has access to the previously specified theme and parameters const useStyles = styleSheet.create(({theme, params}) => ({ root: /* Dynamic Styles /, button: / Dynamic Styles /, text: / Dynamic Styles */, }));
const MyComponent = (props) => { // Access dynamic styles as class names using the created 'useStyles()' hook // and specify the corresponding parameters const { classes } = useStyles({ color: props.color, fontSize: 10 });
return (
<div className={classes.root}>
{/* */}
</div>
);
}
### 💻 Installation
```bash
$ yarn add @dyst/react @emotion/react @emotion/native
# or
$ npm install @dyst/react @emotion/react @emotion/native
⛳️ Code Sandbox
🪁 Basic usage
Learn more here