ChakraUI - Cannot set isIndeterminate = true for CircularProgress as default props in theme extension

user_13069583 0
Viewed 97

I want to avoid providing the prop "isIndeterminate" to every instance of CircularProgress. I followed the docs to https://chakra-ui.com/docs/styled-system/theming/customize-theme but for some components it seems to not work.

I can't see CircularProgress in this page https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/progress.ts

It seems that some components are built on top of other components and I struggle every time I try to customize them.

Can you explain me how actually extending every ChakraUI component? (not all obviusly, but one or more generic methods to extend them)

export const defaultTheme = extendTheme((theme: Theme) =>
  mergeThemeOverride(theme, {
    components: {
      CircularProgress: {
        defaultProps: {
          isIndeterminate: true,
        },
      },
    },
  }),
);
chakra-ui reactjs
1 Answers

It seems defaultProps is a misleading name, as it does not refer to the component props, but to the theme props. Theme props will be limited to size and variant for the most part (https://chakra-ui.com/docs/styled-system/component-style#styling-single-part-components), which is pretty frustrating.

Not a great solution , but you could create a component with default props and use that instead of Chakra's:

function CustomCircularProgress(props) {
    return <CircularProgress isIndeterminate {...props} />
}
user_26552600
Related