首页 > 其他分享 >在next.js中使用styled-component以及全局主题切换

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

时间:2023-02-14 10:36:01浏览次数:53  
标签:const component ThemeProvide js export mode styled import


文章目录

  • ​​使styled-component 像SPA中使用​​
  • ​​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以及全局主题切换_ide


标签:const,component,ThemeProvide,js,export,mode,styled,import
From: https://blog.51cto.com/u_15964288/6055870

相关文章

  • styled-components给svg添加动画
    ​​https://stackoverflow.com/questions/68043891/inherited-svg-functional-component-cannot-add-style-styled-components​​如下直接继承react组件然后添加样式居......
  • JS实现下载文件
    最近需要下载一些视频,数量不算多,百十个,动态加载比较多,写爬虫比较麻烦,想想不如直接做个书签JS直接点点鼠标下载了。第一个:直接打开链接javascript:(function(){varuri_e......
  • Python_json类方法
    Python_json类方法importrequestsimportjsonheaders={"User-Agent":"Mozilla/5.0(LinuxAndroid6.0Nexus5Build/MRA58N)AppleWebKit/537.36(KHTML,l......
  • styled-components ts频繁检查出错 keyframes
    正常的书写到了ts后频繁出错代码规范上了ts检查后如图让人烦躁的检查查出一堆不知所以的问题换一种写法通过了检测单显然这不是一个好方法ts-styled-plugin有待加......
  • js 0.1+0.2 !== 0.3 简单解决方案
    exportconstround=number=>{constgetFloat=number.toString().split(".");if(getFloat.length===1){returnnumber;}constfloatLength=getFloa......
  • Node.js 处理 File
    Node.js处理Filefs模块常规使用运用递归遍历目录树创建文件和目录读写文件path模块对于file的理解,此处fs模块Node.js提供了处理文件系统的内置模块:f......
  • go-rod 设置等待,用js设置等待
       page.MustWait(`()=>{window.astr=Array.from(document.querySelectorAll('#noResult>div>div>p:nth-child(3)')).map(article=>article.inn......
  • Js导出csv
    functionexportCSV(title,jsonData,name){//要导出的json数据letstr=``;for(letioftitle){......
  • 介绍 Blite,轻量级 Node.js 后端服务器
    为小型应用程序构建后端服务器可能是一个复杂且耗时的过程。Blite提供了一种解决方案来简化此过程并让您快速启动和运行。Blite是一个单一的Node.js后端服务器应用程序,提......
  • 对json中的字典提取其中的所有参数(包括list和dict中)整合为一层
    例如:在python中,我有一个字典,类似于{s1:[{s11:0,s12:2},{s13:3,s14:4}],s2:'s2',s3:{s31:0,s32:2}},我想使用递归提取其中所有的字典的key值和value,并在key值中包含它在字典......