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

问题描述

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

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

是否可以使用这个字符串（在运行时之前是未知的）并对其进行本质上与 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>
);

解决方法

你可以试试这个：

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