Блог

Обновление 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>
 

что-нибудь еще, что я должен попробовать сейчас ?

Оригинальное сообщение находится ниже

Я не могу расширить тему в пользовательском интерфейсе Chakra в своем приложении NUXT JS. Я хочу использовать свои собственные точки останова в соответствии с моими проектами, а это значит, что в моем приложении должно быть более 4 точек останова.

В моем nuxt.config.js я импортирую его и использую, как показано ниже :

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

chakra: {
  extendTheme : customTheme
},
 

The file 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",
    }
  }
}
 

Когда я буду утешать.войдите в мой индекс.vue

 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'] ?