在next.js中使用styled-component以及全局主题切换

文章目录

  • ​​step1 安装插件​​
  • ​​step2 根目录下创建 `.babelrc`​​
  • ​​step3 创建`page/_document.js`自定义 Document​​
  • ​​参考 特别感谢​​
  • ​​[应用主题] 需完成上一步​​

使styled-component 像SPA中使用

step1 安装插件
yarn add babel-plugin-styled-components
step2 根目录下创建 ​​.babelrc​
{
"presets": [
"next/babel"
], // 覆盖nextjs的默认babel配置,以本文件的babel配置为准
"plugins": [
[
"styled-components",
{
"ssr": true
} // 预编译样式
]
]
}
step3 创建​​page/_document.js​​自定义 Document
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
// 1.这里采用react里High Order Component的方式,可以重新包装APP和所有渲染的组件
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => (props) =>
// App挂载样式
sheet.collectStyles(<App {...props} />)
})
// 因为覆盖了Document,所以要重新返回页面的props
const props = await Document.getInitialProps(ctx)
return {
...props,
styles: <>{props.styles}{sheet.getStyleElement()}</>
}
} finally {
sheet.seal()
}
}

render() {
return (
<Html>
<Head>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument
参考 特别感谢

​_document.js的文档​​​​styled-components 服务端渲染​

nextJS styled-components 集成

[应用主题] 需完成上一步

​_app.js​​ 只加入一个 ThemeProvide 具体在 ThemeProvide 中

import type { AppProps } from "next/app";
import ThemeProvide from "../context/ThemeProvide";

function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvide>
<Component {...pageProps} />
</ThemeProvide>
);
}
export default MyApp;

​ThemeProvide​

import {
createContext,
useState,
useCallback,
ReactNode,
useContext,
} from "react";
import { ThemeProvider } from "styled-components";
import { useMount } from "../hooks";

export const lightTheme = {
primary: "#51f",
fg: "#fff",
bg: "#000",
mode: "light",
};

const darkTheme = {
primary: "#083f2c",
fg: "#000",
bg: "#eee",
mode: "dark",
};

const ThemeContext = createContext<undefined | (() => void)>(undefined);

export const useToggleTheme = () => useContext(ThemeContext);

const ThemeProvide = ({ children }: { children: ReactNode }): JSX.Element => {
const [theme, setTheme] = useState(lightTheme);

const toggleMode = useCallback(() => {
setTheme(({ mode }) => {
const newMode = mode == "dark" ? lightTheme : darkTheme;
localStorage.setItem("MODE", newMode.mode);
console.log("new theme mode:" + newMode.mode);
return newMode;
});
}, []);

useMount(() => {
const oldMode = localStorage.getItem("MODE");
if (oldMode && oldMode != theme.mode) {
toggleMode();
}
});

return (
<ThemeContext.Provider value={toggleMode}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</ThemeContext.Provider>
);
};

export default ThemeProvide;

​useMount​

import { useEffect } from "react";

const useMount = (callback: any) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(callback, []);
};

export default useMount;

在next.js中使用styled-component以及全局主题切换

文章版权声明

 1 原创文章作者:0008,如若转载,请注明出处: https://www.52hwl.com/38372.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年7月15日 上午8:05
下一篇 2023年7月15日 上午8:07