Skip to content

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'
})