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

多夫·罗森伯格

我想弄清楚如何将 CSS 成功应用于从 npm 库导入的组件。

我的问题的核心似乎是我使用 css-loader 作为 react starter kit ( https://github.com/kriasoft/react-starter-kit ) 的一部分并且不完全理解它是如何工作的。

我查看了几个 datepicker 库 - 例如https://github.com/YouCanBookMe/react-datetimehttps://github.com/wangzuo/input-moment

在每种情况下,源代码都将本地类名应用于 HTML。嵌入在库中的格式不会自动应用。我尝试从使用库组件的组件中的 /node_modules 手动导入它们。我还尝试将相关样式复制到本地 css 文件并导入。

问题似乎是 css-loader 将任何导入的样式类名转换为特定于模块的类名,然后与生成的 HTML 中的实际类名不匹配。

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

谢谢!

多夫·罗森伯格

看来我需要做的就是在 css 文件中的类名周围添加 :global() 。例如:

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

这保留了类名而不进行转换,因此它们命中了 HTML。不确定这是否是最佳实践,但它有效。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将样式化组件样式应用于自定义React组件?

如何将CSS样式应用于自定义React组件

如何将后备样式属性应用于React JS组件?

如何将React.memo应用于数组中的所有组件?

如何将全局滚动事件应用于多个React组件?

如何将绝对位置应用于 React Native 中的自定义组件?

如何将CSS应用于react-native-paper中<Card.Content>组件内的<Text>组件?

无法将样式应用于React.js中的样式组件元素

在React中将条件样式应用于组件-内联CSS

样式未正确应用于Navbar React组件

不能使用样式化组件将样式应用于React Native中的自定义组件吗?

将样式应用于扩展的React Native组件的推荐方法是什么?

如何测试样式是否动态应用于React组件

导入本地React组件

Office UI Fabric-如何将CSS样式应用于现有组件

如何在React中有条件地将布局应用于组件

使用组件内的选择器将主题/样式应用于所有html / react标签

将样式组件导入 React 组件时出错

根据组件的使用位置,有条件地将className应用于react组件

如何将默认样式设置为React组件

如何将 vaadin-icon 导入 React 组件?

如何将声音文件导入React Typescript组件?

如何使用样式组件将样式应用于多个组件

如何从组件容器设置 React 组件的样式?

为什么我的CSS不将样式应用于React组件?

如何在单个react组件中更改所有Material UI Typography组件的样式,而无需将类应用于每个元素?

扩展React样式的组件

安装React样式的组件

如何将 React.lazy 用于模块的组件?