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

Question

我在我的网站上使用下一个主题为暗/光模式，并使用高亮显示代码高亮。当主题是黑暗时，我想导入一个黑暗变体，反之亦然。代码：

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

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

棱镜-反应-渲染器暗/光主题：

• duotoneDark
• duotoneLight
• nightOwl
• nightOwlLight
• 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

我会说是，我的方法是创建一个临时文件并将其传递给一个主题支柱，然后在这个临时文件中，我将使用'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(()=> {})

看看这个反应码分裂