webpack CSS样式未应用CSS模块React

p1tboqfb 于 2022-12-23 发布在 Webpack

关注(0)|答案(1)|浏览(176)

我正在使用React脚本：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>
);

问题是根本没有应用样式。结果与images.

相同
有什么方法可以解决这个问题吗？我根本没有碰过cra的webpack配置。

webpack

来源：https://stackoverflow.com/questions/74893160/css-styles-not-applied-css-modules-react

1条答案

按热度按时间

7lrncoxx1#

我创建了这个code sandbox来重现这个行为，并发现了两件事：
1.您提供的CSS代码包含嵌套类和searching about。我发现本机不支持此特性，只有 * 预处理器 *（如 *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;
}

classNames.bind()不是工作所必需的，所以我只是注解掉它，但是搜索这个方法，这个classnames看起来是一个库的一部分，正确的使用方法应该是这样的，基于这个link：

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

赞(0）回复(0）举报 2022-12-23

我来回答

webpack CSS样式未应用CSS模块React

1条答案

相关问题

热门标签

最新问答