question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: What is the preferred way to change the core props of a component?

See original GitHub issue

I’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:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
httpetecommented, Feb 18, 2021

A new version of the library is expected to be released very soon which will allow you to do precisely that. You can check the theming docs for this upcoming release: https://github.com/chakra-ui/chakra-ui/blob/master/docs/pages/theming/simple.mdx#using-the-themekey

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.

0reactions
cereallarcenycommented, Jun 12, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Components and Props - React
We recommend naming props from the component's own point of view rather than the context in which it is being used.
Read more >
How To Customize React Components with Props
In this tutorial, you'll create custom components by passing props to your component. Props are arguments that you provide to a JSX element....
Read more >
How to use Props in React - Robin Wieruch
Everything you need to know about props in React. How to pass props to components, how to set default props, how to know...
Read more >
javascript - Which of these strategies is the best way to reset a ...
The getDerivedStateFromProps method is static and the signature only gives you access to the current state and next props. This is a problem...
Read more >
Props! — and how to pass props to components in React ...
Passing only props from component to component doesn't make the component interactive, because nothing is there to change the props. Props are read-only....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found