reactjs - 如何在 chakra UI 中为 css 变量添加自定义颜色

Question

这是我的 index.js

<ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
  <App />
</ChakraProvider>

这是在我的landing-header.jsx 文件中

<HStack border="2px">
  <ButtonGroup  variant="ghost"  spacing={4}>
    <Button textColor={useColorModeValue('custom.100','custom.200')} size="md">Save</Button>
    <Button size="md">Cancel</Button>
    <Button size="md">Save</Button>
    <Button size="md">Cancel</Button>
    <Button size="md">Save</Button>
    <Button size="md">Cancel</Button>
  </ButtonGroup>
</HStack>

这是我的 theme.js

 const styles = {
  global: (props) => ({
    body: {
      bg: mode('#6cb6ff', '#003a75')(props),
    },
    
  }),
  colors:{
    custom:{
        100:'#6cb6ff',
        200:'#003a75'
    }
}
};

const config = {
  initialColorMode: 'system',
  useSystemColorMode: true,
};

const theme = extendTheme({ config, styles });
export default theme;

我已按照此处的说明进行操作，但您可以在此处看到它仍然无法正常工作