Chakra UI全局主题无法自定义PopoverContent组件？如何解决

问题根源 #

Chakra UI里PopoverContent并不是独立的顶层组件，它是Popover组件的内置子部件，所以直接在components下单独配置PopoverContent不会生效，得把它嵌套在Popover的配置项里。

正确的全局主题配置方式 #

修改extendTheme中的配置，将PopoverContent的样式放在Popover组件的parts对应的baseStyle里：

export const theme = extendTheme({
  components: {
    Popover: {
      baseStyle: {
        content: {
          bgColor: "black",
          color: "white" // 可顺便设置文本颜色，提升内容可读性
        }
      }
    },
    Button: {
      baseStyle: {
        color: "blue"
      }
    }
  }
});

完整的Index.jsx示例 #

import { extendTheme, ChakraProvider } from "@chakra-ui/react";
import ReactDOM from "react-dom";
import App from "./App";

export const theme = extendTheme({
  components: {
    Popover: {
      baseStyle: {
        content: {
          bgColor: "black",
          color: "white"
        }
      }
    },
    Button: {
      baseStyle: {
        color: "blue"
      }
    }
  }
});

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

配置完成后，所有PopoverContent都会自动应用黑色背景样式，无需逐个组件手动添加bgColor属性。

内容的提问来源于stack exchange，提问作者Enfield Li