input's border color on first render is black in nextjs

[pedram6195]

Description

I am using chakra's latest version inside a nextjs v14 app. I have some Inputs in my page with no extra styling. when I refresh the page the inputs border color is black on first render, then it turns to the default (gray.200). I've temporarily fixed it by styling every input by myself:

<Input borderColor='gray.200' />

Link to Reproduction

NA

Steps to reproduce

No response

Chakra UI Version

2.8.2

Browser

No response

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

No response

[alessiosferro]

I have the same issue. Any solutions?

[shrestha-prabin]

"use client";

import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import { theme } from "./theme/theme";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider theme={theme}>
      <ColorModeScript initialColorMode="light" />
      {children}
    </ChakraProvider>
  );
}

[pedram6195]

@shrestha-prabin it worked, thanks ♥