扩展默认主题脉轮 ui

Question

我想为所有输入组件设置默认边框颜色，但它不起作用

这是我的 theme.js 文件：

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

输入是一个多部分组件。您可以通过转到该组件的文档并单击页面顶部的查看主题源按钮来确定您要自定义的组件是单部分还是多部分：

如何自定义主题：Docs

如何自定义单部分和多部分组件：Docs（特别是，如何自定义多部分组件）

所以在你的情况下你需要做这样的事情：

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" />;
}

扩展默认主题脉轮 ui

extending default theme chakra ui

reactjs

chakra-ui