Javascript 我可以吗；进口；从字符串中响应CSS模块？

我有一个React项目，它通过导入.CSS文件来使用CSS模块。e、 g.

从“/styles/MyComponent.css”导入样式

我发现自己现在处于这样一种情况：组件接收到定制的CSS片段作为字符串，以响应对服务器的动态调用

是否可以使用这个字符串（在运行时之前是未知的）并对其执行与使用webpack编译.css文件时，
import
对其执行的操作基本相同的操作

例如：

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>
);

从“/styles/MyComponent.css”导入样式；
//稍后在组件中。。。
moreStyle=“包含有效CSS的字符串”；
//do*something*此处的moreStyle string用于执行导入到文件的任何操作。
myJSX=(
此div内容由someClass设置样式
此div内容需要由其他类设置样式，但显然这不起作用
);
您可以尝试以下方法：

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>
);


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

在您的代码中，className被定义为字符串，这是预期的，但是，在本文档中可能没有提及CSS。尝试console.log并查看得到的结果


另一种可能的解决方案是将样式放在同一组件文件中。组件样式的常见设计选择是内联样式。这对于中大型项目尤其有用，因为在这些项目中，管理文件会变得非常困难

有用的参考资料：


您是否介意对您编辑的内容进行评论，以便我关于您如何定义类名的解决方案不会产生误导。啊，是的-对不起。我错误地在类名值周围写了引号而不是大括号。我的代码使用花括号：将“className”属性更改为“style”。如果您的样式是一个字符串，那么将其转换为JSON即可。如果它已经是序列化对象，则可以跳过最后一步。如果您仍然想要className，它可以在那里，尽管我不认为除了E2E测试之外还有什么意义。请注意，styles需要一个对象，因此根据您导入的内容，您可以尝试：styles={code}或try styles={{code}}。我很欣赏以不同方式定义style的建议，但是字符串
moreStyle
的内容在运行时动态到达我的组件。我事先不知道它们，我希望能够通过在运行时对它们进行编译时对从文件导入的css内容所做的任何操作，将它们集成到现有的css中
// Filename: MyComponentStyle.js
//Example styles
export const styles = {
  someClass: { height: 10 },
  someOtherClass: {
    backgroundColor: 'red',
  }
};