Chakra UI配色方案道具打开按钮

Question

i扩展了chakra_i中的主题提供程序

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
);

我使用了类似的按钮组件，并将colorScheme道具设置为我的主题值：

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

它在css中生成以下内容：CCD_ 1。所以它不应用颜色，有问题吗？？

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

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

Answer 1

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

如果我们观察脉轮为实心按钮生成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

Answer 2

我相信为ChakraUI添加自定义样式的新方法是使用组件样式的styleconfig。

例如：

import { defineStyleConfig } from '@chakra-ui/react'
const Button = defineStyleConfig({
// The styles all button have in common
baseStyle: {
fontWeight: 'bold',
textTransform: 'uppercase',
borderRadius: 'base', // <-- border radius is same for all variants and sizes
},
// Two sizes: sm and md
sizes: {
sm: {
fontSize: 'sm',
px: 4, // <-- px is short for paddingLeft and paddingRight
py: 3, // <-- py is short for paddingTop and paddingBottom
},
md: {
fontSize: 'md',
px: 6, // <-- these values are tokens from the design system
py: 4, // <-- these values are tokens from the design system
},
},
// Two variants: outline and solid
variants: {
outline: {
border: '2px solid',
borderColor: 'purple.500',
color: 'purple.500',
},
solid: {
bg: 'purple.500',
color: 'white',
},
},
// The default size and variant values
defaultProps: {
size: 'md',
variant: 'outline',
},
})

点击此处阅读更多信息：https://chakra-ui.com/docs/styled-system/component-style