如何将本地样式应用于导入的 React 组件
How to apply local styles to imported React components
我想弄清楚如何让 CSS 成功应用于我从 npm 库导入的组件。
我的问题的核心似乎是我正在使用 css-loader 作为反应入门工具包 (https://github.com/kriasoft/react-starter-kit) 的一部分并且不完全理解它是如何工作的。
我查看了几个日期选择器库 - 例如 https://github.com/YouCanBookMe/react-datetime and https://github.com/wangzuo/input-moment。
在每种情况下，源代码都将本地 class 名称应用于 HTML。库中嵌入的格式不会自动应用。我已经尝试从使用库组件的组件中的 /node_modules 手动导入它们。我还尝试将相关样式复制到本地 css 文件并导入它。
问题似乎是 css-loader 正在将任何导入的样式 class 名称转换为模块特定的 class 名称，然后与实际的名称不匹配 class 结果中的名称 HTML。
我是不是处理错了？导入组件并对其应用自定义样式的首选方法是什么？
谢谢！
看来我需要做的就是在 css 文件中的类名周围添加 :global() 。例如：
:global(.myclass) {
color:red;
}
这保留了类名而不进行转换，因此它们命中了 HTML。不确定这是否是最佳实践，但它确实有效。
我想弄清楚如何让 CSS 成功应用于我从 npm 库导入的组件。
我的问题的核心似乎是我正在使用 css-loader 作为反应入门工具包 (https://github.com/kriasoft/react-starter-kit) 的一部分并且不完全理解它是如何工作的。
我查看了几个日期选择器库 - 例如 https://github.com/YouCanBookMe/react-datetime and https://github.com/wangzuo/input-moment。
在每种情况下，源代码都将本地 class 名称应用于 HTML。库中嵌入的格式不会自动应用。我已经尝试从使用库组件的组件中的 /node_modules 手动导入它们。我还尝试将相关样式复制到本地 css 文件并导入它。
问题似乎是 css-loader 正在将任何导入的样式 class 名称转换为模块特定的 class 名称，然后与实际的名称不匹配 class 结果中的名称 HTML。
我是不是处理错了？导入组件并对其应用自定义样式的首选方法是什么？
谢谢！
看来我需要做的就是在 css 文件中的类名周围添加 :global() 。例如：
:global(.myclass) {
color:red;
}
这保留了类名而不进行转换，因此它们命中了 HTML。不确定这是否是最佳实践，但它确实有效。