我可以从字符串中“导入” React CSS 模块吗？答案

【问题标题】：can I "import" React CSS modules from a string?我可以从字符串中“导入” React CSS 模块吗？
【发布时间】：2023-03-26 15:50:02
【问题描述】：

我有一个 React 项目，它通过导入 .css 文件来使用 CSS 模块。例如import styles from "./styles/MyComponent.css";

我发现自己现在处于这样一种情况，即组件接收自定义的 CSS sn-p 作为字符串以响应对服务器的动态调用。

是否有可能获取这个字符串（直到运行时才知道）并对它执行与import 在 webpack 编译时对 .css 文件执行的操作相同的操作？

例如：

import styles from "./styles/MyComponent.css";

//later on in component...
moreStyle = "a string containing valid CSS";

//do *something* here to moreStyle string to do whatever importing does to a file.

myJSX = (
  <div className={styles.someClass}>
    This div content is styled by someClass
  </div>
  <div className={moreStyle.someOtherClass}>
    This div content needs to be styled by someOtherClass, but obviously this isn't working
  </div>
);

【问题讨论】：

您是否介意评论您编辑的内容，以便我关于您如何定义您的 className 的解决方案不会误导。
啊，是的——对不起。我错误地在 className 值周围写了引号而不是花括号。我的代码使用花括号
试试这个：将“className”属性更改为“style”。如果您的样式是字符串，则将其转换为 JSON 即可。如果它已经是一个序列化的对象，那么你可以跳过最后一步。如果您仍然想要 className，它可以在那里，但我认为除了 E2E 测试之外没有其他意义。请注意，样式需要一个对象，因此根据您要导入的内容，您可以尝试：styles={code} 或 try styles={{code}}

标签： javascript css reactjs css-modules react-css-modules

【解决方案1】：

你可以试试这个：

import styles from "./styles/MyComponent.js";

myJSX = (
  <div style={styles.someClass}>
    This div content is styled by someClass
  </div>
  <div style={styles.someOtherClass}>
    This div content needs to be styled by someOtherClass, but obviously this isn't working
  </div>
);

请考虑创建一个序列化对象。

// Filename: MyComponentStyle.js
//Example styles
export const styles = {
  someClass: { height: 10 },
  someOtherClass: {
    backgroundColor: 'red',
  }
};

React 不像典型的 HTML/CSS/JS 应用程序那样工作。需要注意的是，JSX 可能看起来像 HTML，但它不是 HTML。

在您的代码中，className 被定义为一个字符串，这是预期的，但是，本文档中可能没有引用 CSS。尝试 console.log 看看你得到了什么。

...

另一种可能的解决方案是将您的样式简单地放在同一个组件文件中。组件样式的常见设计选择是内联样式。这对于可能难以管理文件的中大型项目特别有用。

有用的参考资料：

https://reactjs.org/docs/dom-elements.html#style

https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

【讨论】：

我很欣赏以不同方式定义样式的建议，但字符串 moreStyle 的内容会在运行时动态到达我的组件。我事先并不知道它们，我希望能够通过在运行时对它们执行任何操作来将它们集成到现有的 css 中，无论编译器在构建时对从文件导入的 css 内容所做的操作