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