时间戳

首页 > 解决方案 > 我可以从字符串中“导入” React CSS 模块吗？

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

问题描述

我有一个通过导入 .css 文件来使用 CSS 模块的 React 项目。例如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>
);

标签： javascriptcssreactjscss-modulesreact-css-modules

解决方案

你可以试试这个：

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

推荐阅读