reactjs - 在应用程序主题级别样式化 Chakra UI FormControl 和标签

Question

已经使用 Chakra 有一段时间了，但我无法理解所有组件的样式，在这种情况下，FormControl在主题文件的全局级别上。

例如，如果我想为我的FormControl和FormLabel元素添加边距底部，我会将组件对象添加到主题文件中，如下所示：

  components: {
    Form: {
      parts: ['control', 'label', 'errorMessage'],
      baseStyle: {
        control: {
          marginBottom: '2rem',
        },
        label: {
          marginBottom: '3rem',
        },
      },
    },
  }, 

但这对渲染的基本样式没有影响FormControlor FormLabel。

有人可以帮我解决我在这里做错的事情吗？

Answer 1

这对我有用：

import type { ComponentStyleConfig } from '@chakra-ui/theme';
import { extendTheme } from '@chakra-ui/react'


const Form: ComponentStyleConfig = {
  // The styles all button have in common
  parts: ['container'],
  baseStyle: {
    /// The container styles the FormControl
    container: {
      marginY: '20px'
    }
  },
}

const theme = extendTheme({
  components: {
    Form,
  },
})

Answer 2

仔细查看源代码后，FormControl 没有部件数组，因为它是一个上下文而不是一个组件。因此，它不能被样式化！