文章/答案/技术大牛

发布

社区首页 >问答首页 >是否有一种方法可以在NextJS中的组件级上使用SCSS主题样式和下一个主题？

问是否有一种方法可以在NextJS中的组件级上使用SCSS主题样式和下一个主题？
EN

Stack Overflow用户

提问于 2022-11-09 15:35:55

回答 1查看 55关注 0票数 0

对于我的(NextJS)应用程序，我尝试使用SCSS和下一个主题来实现主题样式。当我在全局级别上使用我的主题混合时，它可以工作，但是在组件级别，它将不能工作。

对于主题设置，我使用这种scss方法，我使用下一个主题在主题之间切换。

next.config.js:

const path = require('path')
    
module.exports = {
 sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    },
 }

_app.js页面：

import Layout from '../components/Layout';
import { ThemeProvider } from 'next-themes'

import '../styles/globals.scss';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <ThemeProvider attribute="class" disableTransitionOnChange>
        <Component {...pageProps} />
      </ThemeProvider>
    </Layout>
  )
}

布局组件：

import Head from 'next/head';
import Header from '../Header';
import Footer from '../Footer';

import styles from './Layout.module.scss';

export default function Layout({ children }) {
  return (
    <>
      <Head>
        <title>My title</title>
        <meta name="description" content="My app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.container}>
        <Header />
        <main className={styles.main}>    
          {children}
        </main>
        <Footer />
      </div>      
    </>
  )
}

My主题变量( _variables.scss: )

/* Light Theme Colors */
$color-bg-light: #f2f2f2;
$color-text-light: black;
$color-link-light: #002fff;

/* Dark Theme Colors */
$color-bg-dark: #001329;
$color-text-dark: white;
$color-link-dark: #64ff00;

_themes.scss:

@import './variables';

$themes: (
  dark: (
    'text-color': $color-text-dark,
    'bg-color': $color-bg-dark,
    'link-color': $color-link-dark
  ),
  light: (
    'text-color': $color-text-light,
    'bg-color': $color-bg-light,
    'link-color': $color-link-light    
  )
);

@mixin theme() {
  @each $theme, $map in $themes {
    $theme-map: $map !global;
    .#{$theme} & {
      @content;
    }
  }
  $theme-map: null !global;
}

@function theme-get($key) {
  @return map-get($theme-map, $key);
}

ThemeSwitch组件：

import { useState, useEffect } from 'react';
import { useTheme } from 'next-themes';

import styles from './ThemeSwitch.module.scss';

export default function ThemeSwitch() {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  // useEffect only runs on the client, so now we can safely show the UI
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  return (
    <>
      <div className={styles.switch}>
          The current theme is: {theme}
        <button onClick={() => setTheme('light')}>Light Mode</button>
        <button onClick={() => setTheme('dark')}>Dark Mode</button>
      </div>
    </>
  )
};

主题混音在globals.scss中的使用是有效的：

@import 'variables.scss';
@import 'themes.scss';

html,
body {
  @include theme() {
    color: theme-get('text-color');
    background-color: theme-get('bg-color');
  }
}

a {
@include theme() {
    color: theme-get('link-color');
  }
}

，但在组件级，它不工作.

等，Footer.module.scss:

@import '../../styles/variables';
@import '../../styles/mixins';
@import '../../styles/themes';

.footer {
 
  p {
    font-size: $font-size--small;
  }

  a {
    @include theme() {
      color: theme-get('link-color');       
    }
  }

 }

themes

scss-mixins

sass

next.js

components

回答 1

Stack Overflow用户

发布于 2022-11-20 16:54:33

找到了解决办法。对于在组件中工作的主题，混合器需要“：全局”。

我用的是扎拉坦溶液。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74377528

复制

相似问题

问是否有一种方法可以在NextJS中的组件级上使用SCSS主题样式和下一个主题？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有一种方法可以在NextJS中的组件级上使用SCSS主题样式和下一个主题？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有一种方法可以在NextJS中的组件级上使用SCSS主题样式和下一个主题？
EN