Getting started

Components customization

Componentry uses PostCSS to enable 100% control over the final component styles included in your application.

1. Override Componentry styles

Any of the Componentry default styles can be overridden by defining a new value, for example makingh1 variants have a larger font size.

// componentry.config.js module.exports = { components: { '.C9Y-Text-h1': { fontSize: '5rem' } } }

2. Extend Componentry styles

You can add new styles or classes to any of the components and they will be included in the final output.

// componentry.config.js module.exports = { components: { '.C9Y-Text-h1': { // Add a style to an existing class textTransform: 'uppercase' } // Or add completely new classes '.C9Y-Text-subtitle': { fontSize: '5rem' } } }

3. Customize default props

You can override the default props for any component using the Theme component, like defaulting all buttons to the outlined variant.

// index.ts import React from 'react'; import ReactDOM from 'react-dom'; import { Theme } from 'componentry' import App from './App'; const theme = { Button: { variant: 'outlined' } } ReactDOM.render( <React.StrictMode> <Theme theme={theme}> <App /> </Theme> </React.StrictMode>, document.getElementById('root') );

3. Augment types

For TS users types for component props can be overridden using module augmentation.

// Override the allowed Button variants using provided ButtonPropsOverrides declare module 'componentry/types/components/Button/Button' { interface ButtonPropsOverrides { variant: 'filled' | 'outlined' | 'text' } }