根据下一个主题有条件地导入css包

Question

我在我的网站上使用next主题进行暗/亮模式，并使用highlightjs进行代码高亮显示。我想在主题为深色时导入深色变体，反之亦然。代码：

import { useTheme } from "next-themes";    
import "highlight.js/styles/atom-one-light.css";
//import "highlight.js/styles/atom-one-dark.css";
export default function App(){
const {theme}=useTheme()
return<div>abc</div>
}

Answer 1

如果不严格，您可以尝试使用棱镜反应渲染器来突出显示代码

棱镜反应渲染器深色/浅色主题：

• 双色深色
• duotoneLight
• 夜猫子
• 夜猫头鹰灯
• vsDark
• vsLight

import Highlight, { defaultProps } from "prism-react-renderer";
import nightOwl from 'prism-react-renderer/themes/nightOwl';
import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
const { theme } = useTheme();
const mapTheme = {
light: nightOwlLight,
dark: nightOwl,
};
return (
<Highlight
{...defaultProps}
theme={mapTheme[theme]}
code={children.trim()}
language={language}>
{/* custom file name, clipboard, highlighting line, line number, ... */}
</Highlight>
);

Answer 2

我会说是的，我的方法是创建一个HOC并向它传递一个主题道具，然后在HOC中，我将使用"React.useEffect"挂钩根据主题名称有条件地导入文件

您可以使用以下代码动态导入文件：

Import "filepath"
# or lazy import would be like
React.lazy(() => import "filepath")
# additionally you can use async await
await import("filepath")
# or import("filepath").then(()=> {})

看看这个反应代码分裂