如何将本地样式应用于导入的React组件

Question

我试图找出如何将CSS成功应用于我从npm库导入的组件。

我的问题的核心似乎是我使用css-loader作为反应入门套件（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中的实际类名不匹配。

我接近这个错误吗？导入组件并对其应用自定义样式的首选方法是什么？

谢谢！

Answer 1

我需要做的就是在css文件中的类名周围添加：global（）。例如：

:global(.myclass) {
   color:red;
  }

保留没有转换的类名，因此他们点击了HTML。不确定这是否是最佳做法，但它确实有效。