Is there an easy way to customize component?

What problem does this feature solve?

In our project we want to customize button component, such as changing its height. I just saw the V1 theming API but it needs much code.

What does the proposed API look like?

Can we have the way to customize a component like below so we can customize a component with less code:

import theme from '@chakra-ui/theme';

const customTheme = theme.customizeComponent('Button', {
  sizes: {
    md: {
      height: '38px',
    }
  }
})

export default customTheme;

Thanks in advance.

[with-heart]

I keep coming back to this topic because it is definitely frustrating to have to spread so deeply to add basic modifications, but so far I haven’t come up with anything that isn’t more clear than using deepmerge.

Here’s an example: https://codesandbox.io/s/quizzical-bogdan-vh593?file=/src/App.tsx

You can make whatever modifications you want to the entire theme by passing an object that is deeply merged with the theme.

imo off the top of my head there are a few wins we can gain from making our own API for this though (or wrapping deepmerge with our own typed function(s) at least):

• typing to guide users to the correct object shapes
• forced separation of modifications for clarity
• composability
  • define a modification once, apply to multiple components (example: if you wanted to share a variant across multiple components)
  • function modifications could be automatically composed (example: default component variant is a function, and user defines a variant of the same name as a function—run the default function, run the user-defined function, then deep merge the results together)

Just thinking out loud a little bit here, definitely not sure what the best way to proceed is! But deepmerge allows you to achieve a degree of simplicity immediately if you want it.

[ljosberinn]

Your solution would work, but you’d pollute your autocomplete with a second Button and couldn’t just import from chakra directly. And if you rename it, you’d need everyone working on the project to know what your CustomButton or ThemedButton is called and I bet someone still imports from Chakra directly.

Besides, this would only work for components itself I’m afraid. You couldn’t customize e.g. breakpoints there.