css 樣式未應用 CSS 模塊反應

Question

我正在使用 react-scripts: 5.0.1 和我有我的樣式的 module.css 文件。 我的一個樣式文件看起來像這樣。 首先我必須注意一些 module.css 工作正常。 看來問題可能出在 classNames.bind 上，但我不確定，我對這個問題有點陌生。

.rectangle {
  height: 100%;
  padding-top: 3px;
  & > .title {
    color: var(--red-70);
    font-size: 16px;
    line-height: 20px;
    margin-right: 12px;
  }
  & > .value {
    color: white;
    font-size: var(--message-text-size);
    line-height: var(--message-text-size);
    white-space: nowrap;
  }
}

然后我將這個文件導入到我的 jsx 文件中。

import style from './styles.module.css'

之后我使用它如下

const cx = classNames.bind(style);

const Rectangle = ({ title, value }) => (
  <Stack className={style.rectangle}>
    <div className={style.title}> { title } </div>
    <div className={style.value}> { value } </div>
  </Stack>
);

問題是樣式根本沒有應用。 結果如圖像。

有任何解決這個問題的方法嗎？ 我根本沒有接觸 cra 的 webpack 配置。

Answer 1

我創建了這個代碼沙箱來重現這種行為並發現了兩件事：

1. 您提供的 CSS 代碼具有嵌套類，搜索后我發現此功能不受本機支持，僅適用於Saas 等預處理器。 所以解決方案是取消類，如下所示：

.rectangle {
  height: 100%;
  padding-top: 3px;
}

.title {
  color: var(--red-70);
  font-size: 16px;
  line-height: 20px;
  margin-right: 12px;
}

.value {
  color: white;
  font-size: var(--message-text-size);
  line-height: var(--message-text-size);
  white-space: nowrap;
}

3. classNames.bind()不是使事情正常運行所必需的，所以我只是將其注釋掉。 但是搜索這種方法，這個classnames名似乎是庫的一部分，正確的使用方法應該是這樣的，基於這個鏈接：

const cx = classnames.bind(style);

const Rectangle = ({ title, value }) => (
  <Stack className={cx('rectangle')}>
    <div className={cx('title')}> { title } </div>
    <div className={cx('value')}> { value } </div>
  </Stack>
);