css - 在 react 中动态设置子组件的样式

Question

我正在使用 sass 通过为每个组件导入已编译的 css 来设置我的组件的样式，这不会很好地动态设置样式或缩放

上下文:

我有一个主应用程序组件的主样式表，其中包含带有媒体查询和不同自定义列大小的响应式 UI 类。我不想为主要组件的每个子组件重复这些类...只是为了确保每个子组件都可以访问它们...我是否以错误的方式处理组件样式？

我还能如何让我的子组件继承 css 类？我必须将它们作为 Prop 传递下去吗？我觉得有更好的方法来解决这个问题...

动态更改时如何维护全局样式状态？

Answer 1

I am using sass to style my components by importing the compiled css per component

我不推荐这种方法。React 是用 Webpack 编译的。如果您使用 create-react-app 来初始化您的新元素，您只需将任何 .scss 文件导入到您的 index.js 中，Webpack 会将其编译为 .css 文件并在构建时将其注入(inject)到您的 HTML 中。如果你这样做，你可以在你的 React 应用程序的任何地方使用任何 css 类。

更多信息在这里:https://scotch.io/tutorials/using-sass-in-create-react-app-v2

这里:https://create-react-app.dev/docs/adding-a-sass-stylesheet

P.s.:我建议您在 src 中创建一个 scss 文件夹，其中包含一个主要的 scss 文件(例如 app.scss)。在 app.scss 中，您可以@import 所有其他可以继承变量等的 scss 文件。然后将 app.scss 导入您的 index.js