[[Feature request]] overrides option with jsx elements

[yassinebridi]

Imagine you are working with a props based design system, like chakra-ui for example, and you want to override every heading: h1 => h6 it would be much better if it could override all of them with just changing chakra's props like this:

const overridesObj = {
  h1: <Heading as="h1" size="2xl"></Heading>,
  h2: <Heading as="h2" size="xl"></Heading>,
  ...
}

instead of writing a whole component for every heading.

[quantizor]

If Chakra components are styled components you could do something like:

overrides: {
  h1: Heading.attrs({ as: 'h1' })``,
  h2: Heading.attrs({ as: 'h2' })``,
}

[yassinebridi]

Unfortunately it's not, it's based on emotionjs, emotion doesn't have a similar function, so i tried this:

h1: styled(Heading).attrs({
    as: "h1",
})``

and it works. But the problem is, i will lose all the props and types that chakra provides. so if i try to add a fontSize prop like this:

h1: styled(Heading).attrs({
    as: "h1",
    fontSize: "2xl",
})``

it will try to set the fontSize as an html attribute to h1, which is not the desired output.