extending default theme chakra ui

Question

I want to set default borderColor to all Input components but it doesn't work

This is my theme.js file:

import { extendTheme } from "@chakra-ui/react";

const config = {
  initialColorMode: "light",
  useSystemColorMode: false,
};

const theme = extendTheme({
  config,
  components: {
    Input: {
      borderColor: "teal",
    },
  },
});

export default theme;

Answer 1

Input is a multi-part component. You can figure out if the component you're trying to customise is single-part or multi-part by going to the docs for that component and clicking the View theme source button at the top of the page:

How to customise the theme: Docs

How to customise single-part and multi-part components: Docs (especially, how to customise multi-part components)

So in your case you need do something like this:

index.js :

import * as React from "react";
import { render } from "react-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import App from "./App";

const Input = {
  variants: {
    filled: () => ({
      field: {
        borderColor: "teal"
      }
    })
  }
};

const theme = extendTheme({
  components: {
    Input
  }
});

const rootElement = document.getElementById("root");
render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  rootElement
);

App.js :

import * as React from "react";
import { Input } from "@chakra-ui/react";

export default function App() {
  return <Input placeholder="extra small size" variant="filled" />;
}