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 属性设置为我的主题具有的值：

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

它在 css 中产生了以下内容：background: brand.50.500;。所以它不应用颜色，有什么问题吗？？

我注意到一些东西，没有 .number：例如 .50 或 .100...品牌不起作用，但其他内置颜色起作用。

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

Answer 1

colorScheme只接受颜色名称。在您的情况下，它将是 colorScheme="brand".

如果我们检查脉轮 works 为实体按钮生成 colorScheme 的方式，我们可以注意到它调用 ${c}.500。这意味着当您创建品牌配色方案时，您需要为 500 指定一种颜色，而您在代码示例中缺少它。

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",
      500: "#B794F4", // you need this
    }
  }
});

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

当您调用按钮时，您只需要：

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

Chakra UI 按钮上的 colorScheme 道具

Chakra UI colorScheme prop on button

javascript

reactjs

chakra-ui