Chakra UI styles not working in customElements

[amit08255]

As per screenshot above, both buttons are from Chakra UI. The form component is web-component using customElements is under shadowDOM but the Chakra UI style is not being applied to this button.

<ChakraProvider theme={theme}>
            <Button colorScheme="primary">Click me</Button>
            {
                <standalone-component
                        ref={ref}
                        name={name}
                        email={email}
                    />
            }
</ChakraProvider>

The standalone web-component .js file is hosted on Nginx.

<form onSubmit={onSubmit}>
    <label>
        Name:
        <input type="text" name="username" value={name} onChange={onNameChange} />
    </label>
    <label>
        Email:
        <input type="text" name="email" value={email} onChange={onEmailChange} />
    </label>
    <Button type="submit" colorScheme="primary">Submit</Button>
</form>