Set "as" prop in component styles

[neil-morgan]

Is there any way to set the as prop when defining a component style in the theme?
As an example. The below will render the as prop as a line of css in the element class. Not what I want.

    Heading: {
        baseStyle: {
            as:"h4",
            color: 'red.500',
        },
    },

Is there a specific way built into ChakraUI to achieve this?

[ljosberinn]

Afraid not, it's currently hardcoded as h2 here. Setting the default to h4 is however not recommended in general. If you want to adjust the size, I'd work with that prop instead or extend theme.components.Heading instead.

[neil-morgan]

Thank you for your advice.

Long story short I am looking for a solution to be able to assign both the as prop and fontSize together in one. I much prefer how that helps maintain a hierarchy in the headings.

Right now I have a file in which I extend the Heading component like:

import { Heading } from '@chakra-ui/core'

const H1 = props => {
    return (
        <Heading as="h1" fontSize="6xl" {...props}>
            {props.children}
        </Heading>
    )
}

Heading.H1 = H1
//repeat for all 6 headings
export default Heading

Which allows for:
<Heading.H1>h1 heading with font-size "6xl"</Heading.H1>

This does work and largely achieves what I want. I'm wondering if there is a more "Chakra" way of doing this? Would, like you say, extending theme.components.Heading be the best practice here?

Thank you

[ljosberinn]

Sorry for the late response, kinda hard to track where new answers pop up unless you actively subscribe to the discussion 😐.

It may be a bit more involved, but I'd probably integrate them into the theme by default: https://codesandbox.io/s/unruffled-brattain-jwwv5?file=/src/App.js

[chasinhues]

In case this helps, we implemented our own custom Heading based on chakra's.

We can use our Heading component like so:

<Heading type="h1">This is a H1</Heading>

Source

// Heading.tsx

import React from "react";
import { Heading as ChakraHeading, HeadingProps as ChakraHeadingProps } from "@chakra-ui/core";

export interface HeadingProps extends ChakraHeadingProps {
    type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

const Heading = ({ type, children, ...props }: HeadingProps) => {
    return (
        <ChakraHeading as={type} textStyle={type} {...props}>
            {children}
        </ChakraHeading>
    );
};

export default Heading;

// theme.js

import { theme } from "@chakra-ui/core";
import { merge } from "@chakra-ui/utils";

const customTheme = merge(theme, {
    textStyles: {
        h1: {
            fontSize: ["35px", "55px"],
            fontWeight: 700,
            color: "gray.500",
        },
        h2: {
            fontSize: ["30px", "30px"],
            fontWeight: 700,
            color: "gray.500",
        },
        h3: {
            fontSize: ["21px", "21px"],
            fontWeight: 700,
            color: "gray.500",
        },
        h4: {
            fontSize: ["16px", "16px"],
            fontWeight: 700,
            color: "gray.500",
        },
        h5: {
            fontSize: ["14px", "14px"],
            fontWeight: 700,
            color: "gray.500",
        },
        h6: {
            fontSize: ["12px", "12px"],
            fontWeight: 700,
            color: "gray.500",
        },
    },
});

export default customTheme;