Chakra UI useColorModeValue 不更新主框颜色

Question

刚开始使用 ChakraUI 做出反应和尝试。我在我的 <Box> 主容器上使用他们的 useColorModeValue 属性。虽然，它实际上并没有改变它的颜色，但切换适用于其他所有内容，但不适用于此框。

import {
  ChakraProvider,
  Box,
  Text,
  Link,
  VStack,
  Grid,
  Theme,
  useColorModeValue,
} from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider theme={theme}>
        <Box minH='100vh' bg={useColorModeValue('brand.500', 'teal')}>
            <Test />
            <Hero />
        </Box>
    </ChakraProvider>
  );
}

我是不是漏掉了什么？

Answer 1

useColorModeValue 是一个钩子，根据 React 文档；

Always use Hooks at the top level of your React function, before any early returns. Ref.

E.G

export default function Foo() {
  const bg = useColorModeValue('brand.500', 'teal')
  return (<Box bg={bg} />)
}

但是，您实际上需要将脉轮提供者提升一个级别才能执行此操作；

export default function Application() {
  return (
    <ChakraProvider theme={theme}>
      <Foo />
    </ChakraProvider>
  )
}

Chakra UI useColorModeValue 不更新主框颜色

ChakraUI useColorModeValue not updating main box color

reactjs

chakra-ui