Extending to Custom Component

[patent pecan]

Is it possible to create a custom component based off a base component like the following?

components: {
  Button: Button.extend({
    defaultProps: { color: primaryColor },
  }),
  // referring to this part below
  ButtonSecondary: Button.extend({
    defaultProps: { color: secondaryColor },
  }),
},

const ButtonSecondary = (props) => {
  const { color, children } = useProps('ButtonSecondary', null, props);
  return <div style={{ color }}>{children}</div>
}

The first one, Button: Button.extend works fine, but I am trying to create a new button that will be used in other places. Is there a different way to set this up? ButtonSecondary is not taking any of the default styles from Button.

[tepid crater]

Why not using withProps api? https://mantine.dev/theming/default-props/#withprops-function

[patent pecan]

Yea maybe, but then how do you pass theme variables into it?

Like using a color set in the theme provider.

[tepid crater]

What you mean by pass theme variable?

Not just something like this?

const CustomButton = Button.withProps({
  color: 'primary.9',
})

Or https://mantine.dev/theming/theme-object/#use-mantine-theme-hook