Extend components and share styles

Since your CSS is defined as objects it's easy and intuitive to extend and share simple styles using the spread operator. Note that this method only works for simple style objects, not nested objects or components that use a function to access props.

const MyComponent = panache.div({
    backgroundColor: 'gray',
})

const errorStyles = {
    backgroundColor: 'red',
    color: 'white'
}

const MyOtherComponent = panache.div(({ hasError }) => ({
    ...MyComponent.Styles,
    ...hasError && errorStyles,
    color: 'blue'
}))

Extend complex style objects

If you have nested styles in your style objects the spread operator will override the entire inherited nested styles. Instead you can use the extend function to deep merge your complex style objects.

const MyComponent = panache.div(({ primary }) => ({
    padding: '15px',
    fontWeight: primary ? '600' : 'normal',
    div: {
        backgroundColor: 'red',
        color: 'blue'
    }
}))

const MyOtherComponent = panache.extend(MyComponent)({
    div: {
        backgroundColor: 'green'
    }
})

This will preserve the original color: blue rule and also add the new backgroundColor: green rule to the nested div.

Compose styles from multiple components

You can compose styles from multiple components or Style Objects, just pass them all to the extend function.

const MyComposedComponent = panache.extend(MyButton, MyStyleObject)({
    padding: '15px',
    div: {
        backgroundColor: 'red',
        color: 'blue'
    }
})

The new component will inherit its element type from the first item you pass to extend.

Change element type of a component

You can change the element type of a component using the as prop.

const Button = panache.button({
    border: '2px solid red',
})

Below will render an a element instead of a button.

<Button as="a" />

Extend third party components