next.js - 如何在 chakra ui 中自定义盒子大小？

Question

我想在 chakra ui 中自定义全局样式，以便我的所有元素框大小更改为边框框！这是我的审判。但是什么都没发生。。

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


const overrides: object = {
  styles: {
    global: {
      '*': {
        boxSizing: 'border-box',
      },
    },
  },
};

export default extendTheme(overrides);

我在我的 _app.tsx 文件中导入了这个 extendTheme。我认为这段代码有问题。

标签： next.jscustom-themechakrachakra-ui

Answer 1

Chakra 的 resetCSS 使boxSizing: 'border-box'您在扩展主题时不必这样做。

您可以从 Chakra Provider 进行设置<ChakraProvider resetCSS theme={theme}>