Chakra UI多部分组件样式失效：StylesProvider未找到报错

问题现象 #

按照Chakra UI文档创建多部分组件时，触发以下错误：

ContextError: useStyles: styles is undefined. Seems you forgot to wrap the components in <StylesProvider />

单独使用TestContainer组件时样式正常，但嵌套使用TestChildren组件时，useStyles()会触发上述错误。

代码示例 #

组件实现代码 #

import React from 'react';
import { Box, BoxProps, createStylesContext, useMultiStyleConfig, useStyles } from "@chakra-ui/react";

export function TestContainer(props: any) {
  const { size, variant, children, ...rest } = props

  const styles = useMultiStyleConfig('TestContainer', { size, variant })
  const [StylesProvider] = createStylesContext('TestContainer');

  return (
    <Box __css={styles.testContainer} {...rest}>
      <StylesProvider value={styles}>{children}</StylesProvider>
    </Box>
  )
}

export function TestChildren({ ...props }: BoxProps): JSX.Element {
  const styles = useStyles();
  return <Box __css={styles.testChildren} {...props} />
}

多部分组件样式配置 #

import { createMultiStyleConfigHelpers } from "@chakra-ui/system";

const helpers = createMultiStyleConfigHelpers(['testContainer', 'testChildren'])

export const TestContainer = helpers.defineMultiStyleConfig({
  baseStyle: {
    testContainer: {
      border: '5px solid green',
    },
    testChildren: {
      color: 'blue',
    },
  },
});

问题根源 #

错误的核心原因是**createStylesContext在TestContainer组件内部创建**，导致每次组件渲染时都会生成一个全新的Context实例。子组件TestChildren中调用的useStyles()无法匹配到这个动态生成的Context，因此找不到对应的styles值。

解决方案 #

1. 全局创建StylesContext和专属useHook #

将createStylesContext移到组件外部，全局只创建一次，确保Provider和子组件使用的是同一个Context：

import React from 'react';
import { Box, BoxProps, createStylesContext, useMultiStyleConfig, useStyles } from "@chakra-ui/react";

// 全局创建唯一的StylesContext和对应的useHook
const [StylesProvider, useTestContainerStyles] = createStylesContext('TestContainer');

export function TestContainer(props: any) {
  const { size, variant, children, ...rest } = props

  const styles = useMultiStyleConfig('TestContainer', { size, variant })

  return (
    <Box __css={styles.testContainer} {...rest}>
      <StylesProvider value={styles}>{children}</StylesProvider>
    </Box>
  )
}

export function TestChildren({ ...props }: BoxProps): JSX.Element {
  // 使用专属的useTestContainerStyles，而非通用useStyles
  const styles = useTestContainerStyles();
  return <Box __css={styles.testChildren} {...props} />
}

2. 确保主题中注册组件配置 #

在Chakra主题中注册你的TestContainer组件配置，让useMultiStyleConfig能正确读取样式：

import { extendTheme } from "@chakra-ui/react";
import { TestContainer } from "./path-to-your-config";

export const theme = extendTheme({
  components: {
    TestContainer,
  },
});

原理说明 #

createStylesContext会生成一对绑定的Context和自定义useHook，只有当子组件使用这个专属的useHook时，才能正确获取到Provider传递的styles。如果在组件内部动态创建Context，每次渲染都会生成新的Context，导致上下文不匹配，从而触发错误。

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