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.

I'm primaryI'm dangerI'm danger but primary

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