我想弄清楚如何将 CSS 成功应用于从 npm 库导入的组件。
我的问题的核心似乎是我使用 css-loader 作为 react starter kit ( https://github.com/kriasoft/react-starter-kit ) 的一部分并且不完全理解它是如何工作的。
我查看了几个 datepicker 库 - 例如https://github.com/YouCanBookMe/react-datetime和https://github.com/wangzuo/input-moment。
在每种情况下,源代码都将本地类名应用于 HTML。嵌入在库中的格式不会自动应用。我尝试从使用库组件的组件中的 /node_modules 手动导入它们。我还尝试将相关样式复制到本地 css 文件并导入。
问题似乎是 css-loader 将任何导入的样式类名转换为特定于模块的类名,然后与生成的 HTML 中的实际类名不匹配。
我接近这个错误吗?导入组件并对其应用自定义样式的首选方法是什么?
谢谢!
看来我需要做的就是在 css 文件中的类名周围添加 :global() 。例如:
:global(.myclass) {
color:red;
}
这保留了类名而不进行转换,因此它们命中了 HTML。不确定这是否是最佳实践,但它有效。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句