javascript - ボタンの Chakra UI colorScheme プロップ

Question

chakra_ui のテーマプロバイダーを拡張しました

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

import App from "./App";

const theme = extendTheme({
  colors: {
    brand: {
      50: "#44337A",
      100: "#B794F4"
    }
  }
});

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

Button コンポーネントを次のように使用し、colorScheme prop をテーマの値に設定しました。

 <Button size="sm" colorScheme="brand.100">
    Click Me
  </Button>

css で次のように生成されました: background: brand.50.500;. 色が付かないので、問題ありませんか??

.50.numberや .100 など、ブランドは機能しませんが、他の組み込みの色は機能します。

https://codesandbox.io/s/infallible-allen-1k0tx?file=/src/App.js:257-333