这几天来我一直在用我的头来对付它。我看了所有类似的问题,但它们不太符合我需要的。
我觉得很难相信没有人尝试过,或记录过,这之前,我想要一些想法,如何处理这一点。
要求
我正在为我的应用程序使用react引导程序,我想让用户在一组引导主题之间进行选择。为了保持简单,我目前只有一个光明和一个黑暗。这些样式是https://bootswatch.com/提供的scss,所以我不想尝试JS主题中的常见CSS方法。
理想情况下,我想要的是有条件地呈现/导入css文件的能力。我试过一些东西,其中大多数都不起作用,有一个可以起作用,但真的很糟糕。
我想要的是一种从css文件构造一个带有样式节点的DOM节点,而不是呈现它的方法。然后我可以将所有这些样式节点放入DOM中,并有选择地添加/移除它们。
理想情况下,我根本不需要手动更改DOM。我一直没能找到做这件事的方法。我希望style组件的条件呈现能起到作用,但这并不起作用,因为style从来不加载(超过第一次)或卸载(永远)。
我到目前为止所尝试的
使用惰性加载(工作方式)
我将css放在一个轻量级组件中,例如
import React from 'react';
import './_light.scss';
const Theme = React.forwardRef(( props, ref) => (<div ref={ref}></div>));
export default Theme;```
然后我懒得加载其中一个或在我的应用程序中,就像这样
const LightTheme = React.lazy(() => import('../themes/lightTheme'));
const DarkTheme = React.lazy(() => import('../themes/darkTheme'));
....
const element = (chosenTheme === PreferredTheme.LIGHT) ?
<LightTheme /> : <DarkTheme />
...
return (
<ThemeContext.Provider value={initialValue}>
<React.Suspense fallback="{<></>}">
{element}
</React.Suspense>
{children}
</ThemeContext.Provider>
)
问题是,我给了用户切换主题的选择,似乎发生了两个问题:1)一旦两个都加载了(一次),他们就不会再加载;2)样式节点的顺序很重要,所以无论哪一个最后加载都会一直保持活动状态。
通过在我的useEffect中执行一些hacky节点操作,将(不再使用的样式)/添加(要应用的)样式节点删除到DOM,我能够解决这一问题,但这充其量也是hacky的。
useRef
要获得对每个样式节点的引用,请将其保存到一个dict中,然后将其删除。这是以一种有趣的方式中断的,其中引用在第一次呈现时起作用,但在随后的呈现中,引用变成未定义
动态创建样式表
这里的解决方案看起来很有希望如何动态加载/卸载css。问题是我不知道如何在这个场景中找到样式表的inner text
。正如我所说的,它是作为scss运来的,所以它得到了预处理,我甚至不知道如何才能得到文本。
任何想法或解释都非常感谢。
为什么不将主题指定为应用程序顶层元素的类,并使用CSS变量构建CSS类呢?
#app.dark {
--app-bg: black;
--app-fg: white;
}
#app.light {
--app-bg: white
--app-fg: black;
}
#app {
background-color: var(--app-bg);
color: var(--app-fg);
}
您确实可以使用一个更高阶的组件来包装您的UI,并根据所选主题更改它,并且使用Webpack进行延迟加载(如果值得的话)。FWIW,我的经验是黑暗/光明主题是最容易和最清楚的处理如上。
我知道如何加载CSS。 怎么卸载?
本文向大家介绍使用javaScript动态加载Js文件和Css文件,包括了使用javaScript动态加载Js文件和Css文件的使用技巧和注意事项,需要的朋友参考一下 JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明。 希望下面的方法对你有帮助。 (1)使用JavaScript动态加载Js文件 (2)使用JavaScript
问题内容: 我正在编写一个具有静态外部“外壳”和动态内容部分的Web应用程序。用户浏览系统时,动态内容部分具有许多更新。加载新的内容块时,还可以选择加载另一个JavaScript文件。我以良好的内务管理名义,从DOM中删除了适用于旧内容块的脚本块,因为不再需要JavaScript。 接下来是问题,当我意识到尽管我已经从DOM中删除了该元素,但是先前评估过的JavaScript仍然可以执行。这当然是
问题内容: 如何可靠,动态地加载JavaScript文件?这将用于实现模块或组件,该模块或组件在“初始化”时将根据需要动态加载所有需要的JavaScript库脚本。 使用该组件的客户端不需要加载实现该组件的所有库脚本文件(并将标记手动插入其网页),只需加载“主”组件脚本文件即可。 主流JavaScript库如何做到这一点(原型,jQuery等)? 这些工具是否将多个JavaScript文件合并到脚
问题内容: 我正在开发Web应用程序。我正在使用AngularJS将所有文件动态加载到UI中。 我有一个文件,可在单击或加载时将所有文件动态加载到其中。 现在我的登录页面看起来像下面的结构 现在我的问题是,尽管我能够加载手风琴的menu.html文件,但是却无法加载它所依赖的css和js文件。我已经研究了stackoverflow,但是没有一个对我有用。 任何人都可以帮助确定使用AngularJS
问题内容: 我有一个非常大的javascript文件,仅当用户单击某个按钮时才想加载。我正在使用jQuery作为框架。有内置的方法或插件可以帮助我做到这一点吗? 更多详细信息:我有一个“添加注释”按钮,该按钮应该加载TinyMCE javascript文件(我已经将所有TinyMCE东西都煮成了一个JS文件),然后调用tinyMCE.init(…)。 我不想在初始页面加载时加载它,因为不是每个人都