vue.js - 无法使用 extendTheme 在 NUXT js 中覆盖 Chakra UI 的主题

Question

更新 1

正如@kissu 所说，我尝试了以下操作，但没有成功，1.直接在 nuxt.config.js 中添加密钥不起作用：

chakra: {
    extendTheme: {
        breakpoints: ['89rem', '86rem', '90rem', '120rem', '200rem', '300rem'],
    }
},

2. 主题提供者看起来像这样

<template>
  <div class="container">
    <CThemeProvider>
      <CColorModeProvider>
        <CBox font-family="body" as="main">
            <CReset />
            <siteHeader/>
            <nuxt />
            <siteFooter/>
        </CBox>
      </CColorModeProvider>
    </CThemeProvider>
  </div>
</template>
<script>
import {
  CThemeProvider,
  CColorModeProvider,
  CReset,
  CBox
} from '@chakra-ui/vue'

3.我尝试应用与断点相对应的类以及自定义颜色，但它也没有帮助

<CBox bg="mpw.50" height="2rem" width="2rem">sadsad</CBox>
<CBox as="ul" list-style="none"  d="flex" flexDirection="column">
<CBox as="li" list-style="none" borderBottom="2px solid #E8E8E8">
<CBox 
   :bg="[
   'rebeccapurple','blue','yellow','orange','grey','#8B008B','#7FFF00'
   ]"                            
   padding="1rem"  d="flex" v-bind="mainStyles[colorMode]">
<CImage :src="require('@/assets/imgs/patient.png')" w="5rem" h="5rem" alt=""/>
<CBox flex="1 1 0" padding="1rem" paddingTop="0" paddingBottom="0" v-bind="mainStyles[colorMode]">
<CText fontSize="2xl"  >
   Home Isolation Patients
</CText>
<CText pr="0.5rem">
   Lorem ipsum xyzzzz
</CText>

还有什么我现在应该尝试的吗？

原帖如下

我无法在我的 NUXT JS 应用程序中扩展 Chakra UI 中的主题。我想根据我的设计使用我自己的断点，这意味着我的应用程序中需要有 4 个以上的断点。

在我的nuxt.config.js我正在导入它并使用如下：

import customTheme from './customTheme/custom-theme.js'

chakra: {
  extendTheme : customTheme
},

文件custom-theme.js

console.log("LOADING CUSTOM THEME")
export default {
  // '38rem', '48rem', '62rem', '80rem',
  breakpoints:[ '89rem','86rem','90rem','120rem','200rem','300rem'],
  colors:{
    mpw:{
      50:"#EBEBEB",
    }
  }
}

当我在我的 index.vue 中执行 console.log

mounted() {
  if(process.server){
    console.log("ON SERVER")
    console.log(this)
  }

  if(process.client){
    console.log("ON CLIENT")
    console.dir(this.$chakra.theme)      
  }

},

然后我看不到我的自定义断点

如何添加我自己的一组断点，例如这些断点：['89rem', '86rem', '90rem', '120rem', '200rem', '300rem']？

标签： vue.jsnuxt.jschakra-ui