I am attempting to use the Typography component fr...

# react

[Jesse McKee]

I am attempting to use the Typography component from MUI, and have a redirect.
Reading over the MUI documentation this might look something like

<Typography
            variant="h6"
            component="a"
            href="/"
          >
            LOGO
</Typography>

component should set what is used for the root node, allowing the use of href here.

component takes an ElementType, to which I can provide a FC which turned into something like

Typography {
                variant = TypographyVariant.h6
                component = VFC { 
                    a { href="/"}
                }
                +"Home"
            }

Or, a string could be provided a la

component = "a".asDynamic()

In the first example, it doesn't display "Home" at all, in the second it does display it, but I am unable to provide a redirect (href) directly.

So I'm just trying to figure out what the correct course of action is here.

[aerialist]

inline fun AnchorHTMLAttributes(
    crossinline block: AnchorHTMLAttributes<*>.() -> Unit,
): AnchorHTMLAttributes<*> =
    jso(block)

val Sample = VFC {
    val anchorHTMLAttributes = AnchorHTMLAttributes {
        href = "/"
    }

    Typography {
        variant = TypographyVariant.h6

        component = ReactHTML.a
        +anchorHTMLAttributes

        +"Home"
    }
}