时间戳

首页 > 解决方案 > CSS 模块 - 在 `media-query` 上定义的 `compose` 覆盖了 `media-query` 之外的样式

css - CSS 模块 - 在 `media-query` 上定义的 `compose` 覆盖了 `media-query` 之外的样式

问题描述

我有一个项目可以css modules正常工作，最近我开始在它上面加入响应性。我们当前的设置是我们有一个我们为每种类型的字母大小typography.css定义几个属性的地方，我们会在需要的地方导入该设置。我当前的用例如下。compose

/* somefile.module.css */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  composes: s-text from '../../styles/shared/typography.css';
}

@media screen and (max-width: 600px) {
  .header {
    composes: xs-text from '../../styles/shared/typography.css';
  }
}

/* typography.css */
.s-text {
  font-size: 14px;
  letter-spacing: -0.01px;
  line-height: 16px;
}

.xs-text {
  font-size: 11px;
  letter-spacing: -0.006px;
  line-height: 14px;
}

一旦我开始使用media-query, 在大于600px我仍然看到的屏幕尺寸上composes: xs-text from '../../styles/shared/typography.css';

标签： csscss-modules

解决方案

推荐阅读