Compositions
Jux allows you to easily compose and extend styled components. This feature enables you to create specialized versions of components while maintaining a consistent styling base.
When you compose a component which has variants, they will be inherited by the composed component.
import { styled } from '@juxio/react-styled';
const Button = styled('button', { root: { backgroundColor: 'transparent', borderRadius: '8px', padding: '8px 16px', border: '1px solid', }, variants: [ { props: { type: 'primary' }, style: { color: 'violet', }, }, ],});
const DangerButton = styled(Button, { root: {}, variants: [ { props: { type: 'danger' }, style: { color: '#d13333' }, }, ],});
export default function App() { return ( <div style={{ display: 'flex', gap: '8px' }}> <Button type={'primary'}>I'm primary</Button> <DangerButton type={'danger'}>I'm danger</DangerButton> <DangerButton type={'primary'}>I'm danger but primary</DangerButton> </div> );}
Jux styled
function will work perfectly on all of your own or any other component, as long as they attach a className
prop to a DOM element.
const Button = ({ className, children }) => ( <button className={className}> {children} </button>);
const StyledButton = styled(Button, { color: 'violet'})