我在 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
);
我使用了按钮组件,并将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