Question: What is the preferred way to change the core props of a component?
See original GitHub issueI’m trying to make a UI component system on top of Chakra. Usually I’m extending components with additional functionality specific to my use-cases. However, sometimes I simply change the defaultProps
of a component, re-export, and move on. Here’s an example of that very thing for Button
’s:
import { Button as ChakraButton } from '@chakra-ui/core';
export const Button = ChakraButton;
Button.defaultProps = {
fontWeight: 'medium',
size: 'md',
variant: 'solid',
variantColor: 'blue',
_focus: {
outline: 'none'
}
};
This works great for any buttons that a developer uses directly. However, other Chakra components that compose the Button
component (like AccordionHeader
) will not pick up these changes.
Rather than defining what a Button
looks like when called directly, is there some way I change the internal reference of what a Button
is to Chakra?
I don’t want to go through every component that implements a Button
component and have to override them. I’d rather do it in one place and move on.
I couldn’t find any explanation of this in your documentation, as it looks like you’re only intending for developers to build more complex components off of your components, rather than have the ability to change the definition of an individual core component itself. Is what I’m asking for making sense?
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (4 by maintainers)
Top GitHub Comments
Hi - that link is broken - and what you are doing is exactly what I am thinking too - Can you point me to the new doc for the themekey idea? I feel for projects that want to build on top of the base provided by Chakra is a great use case.
Wow! Hopping on Discord now @santialbo - thrilled about this new direction for Chakra. I’ll close my issue as it will soon be irrelevant. Let me know if I can tackle any open issues for the release!