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

我使用了按钮组件，并将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

- AbdulAzeez Olanrewaju

Answer 1

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

如果我们检查 chakra 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

- Miuki Miu

---

好的，对此有用，那box-shadow如何在chakra中呈现？在50-900之间需要设置哪个关键字？ - AbdulAzeez Olanrewaju

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

- John