This library exposes a new interface to emotion.
import { Styled, StyledTag } from 'zenstyle';
// Use the Styled.tag components
const inlineStyle = <Styled.div zs={{ color: 'red' }}></Styled.div>;
// Or create a styled tag
const Button = StyledTag.button({
color: 'violet',
});
const button = <Button />;
The ZS props accept one of the following types:
- A
CSSObject
null
- A function
(theme: Theme) => CSSObject
- An array of any of the above
The CSSObject
accept any css properties including pseudo selector and child selector (this object is directly passed to emotion).
Ready to use components that accept a zs props
A factory to create a styled component (similar to styled component)
import { StyledTag } from 'zenstyle';
const Button = StyledTag.button([
{ color: 'violet' },
theme => ({ background: theme.background }),
]);
Inject a
className
to an existing componnent
import { StyledComponent } from 'zenstyle';
import { Link } from 'react-router-dom';
const RedLink = StyledComponent(Link)({
color: 'red',
});
Add custom props on an html element to control it's style
import { StyledTagWithProps } from 'zenstyle';
const Button = StyledTagWithProps.button<{ primary?: boolean }>(({ primary = false, ...props }) => {
return {
...props,
zs: {
fontSize: primary ? '1rem' : '1.3rem',
fontWeoght: primary ? : 'bold' : 'normal'
}
}
});