扩展默认主题脉轮 ui答案

【问题标题】：extending default theme chakra ui扩展默认主题脉轮 ui
【发布时间】：2021-10-12 08:19:55
【问题描述】：

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

这是我的 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;

【问题讨论】：

标签： reactjs chakra-ui

【解决方案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" />;
}

【讨论】：