preact-material-components：如何改成 mdc-theme--dark 让所有后裔 ctnl 的 css 风格变化？答案

【问题标题】：preact-material-components: how to change into mdc-theme--dark so that all descenant ctnl's change css style?preact-material-components：如何改成 mdc-theme--dark 让所有后裔 ctnl 的 css 风格变化？
【发布时间】：2021-05-06 12:05:53
【问题描述】：

我已经生成了 preact-cli 应用，我在 Header.js 中有下一个代码：

document.body.classList.add('mdc-theme--dark');

当用户想要将使用过的浅色主题更改为深色主题时。我见过另一个应用程序，其中材料控件会在这种情况下改变主题。但是当上面的代码执行时，它只会改变应用程序的背景！？？

我必须使用某种主题提供程序吗？或者我必须显式设置每个 jsx 元素，如果是这样，我必须使用哪个 css 类名/控件等，以及必须在 css 中定义哪种 css 选择器？一个主要的例子可能非常好！

【问题讨论】：

我通过在主 css 文件中添加下一个块来学习更好地使用 css 选择器：.mdc-theme--dark { background-color: #333;颜色：#fff; } .mdc-theme--dark .mdc-card, .mdc-theme--dark .mdc-form-field, .mdc-theme--dark .mdc-checkbox, .mdc-theme--dark a { color: #FFF;背景颜色：黑色；边框颜色：#FFF；； }
我在将 preact 材料选择和文本字段更改为深色 css 值时遇到了问题。一些值有效，但不适用于 :focus/not :focus'ed。而不是 html 5 select 和 input[type="text"] 像往常一样工作。

标签： html css material-ui themes preact

【解决方案1】：

我找到了一个 github 网址，他们在 preact-material-boilerplate 中讲述了这个主题。从那里最好的方法是：Theming，然后：npm install @material/theme 并像在文档中一样更改自定义基色属性。

下一篇博客会详细介绍 css 自定义属性：https://fristys.me/blog/easy-light-and-dark-mode/

【讨论】：