javascript - 无法使用 css-modules、webpack 和 react 导入样式

Question

我正在设计我的 React 应用程序。我在 webpack 中使用 css-modules。这是我的配置:

{ test: /\.css$/, loaders: ["style", "css?modules"] },

我为我的组件设计了样式，煮了一杯咖啡，但现在它不工作了。所以我有一个我想使用的样式表。我正在导入它:

import styles from "./search.css";

但是，当我进入我的组件内部时，styles 没有定义。我的样式现在都没有被应用。这是我如何使用它的示例:

// the chrome inspector only shows the first two styles, the last is not there
<div className={["col-md-2", "col-lg-1", styles.startTimes]}>

为什么 styles 是空的？

Answer 1

终于解决了。这不是正确的语法:

<div className={["col-md-2", "col-lg-1", styles.startTimes]}>

你有你使用classNames而是做:

<div className={cx("col-md-2", "col-lg-1", styles.startTimes)}>

您还需要在 CSS 中只使用类名。如果您直接设置标签名称的样式(h1 等)，这些不会在本地应用。