Question

如何创建可以覆盖css模块创建的动态样式的打印样式表？

使用CSS模块，类名使用如下唯一名称呈现：

<button class="buttons_style_primary-button__3T" type="submit"> Submit</button>

在我的打印样式表中，我有以下内容，但没有效果：

@media print {
  button {
    display: none;
  }
}

我可以通过将!important添加到按钮样式来使其工作，但我将有许多打印样式，我不想为每个样式属性执行此操作。还有其他选择吗？

如果恰好有React特定的方法，我也在使用React。

Answer 1

伤害了以下事项：

对需要覆盖本地值的全局变量使用！important：

/* app.css */
@media print {
  @page {
    margin: 1cm;
  }

  * {
    color: #000 !important;
  }
}

将特定于组件的覆盖放入每个组件的style.css中：

/* style.css */
.my-class {
  composes: rounded-corners from 'shared/ui.css';
  margin: 0 0 60px 0;
  background-color: white;
}

@media print {
  .my-class {
    page-break-inside: avoid;
    font-size: 10px;
  }
}

/* my-component.jsx */
import style from './style.css';

const MyComponent = () => {
  return (
    <div className={style.myClass}>
      ....
    </Link>
  );
};

我还没有尝试过第三种选择。

您应该能够使用classNames库将顶级覆盖类名与本地类名一起应用：

import app from 'app.css';
import styles from './style.ss'
const MyComponent = () => {
  return (
    <div className={classNames(style.local, app.global)}>
      ....
    </Link>
  );
};

（这第三个选项只是我的头脑，我不知道它是否会起作用）

Answer 2

代替此：

@media print {
  .button {
    display: none;
  }
}

尝试一下：

.button{
  @media print {
    display: none;
  }
}

CSS模块 - 打印样式表 - 如何覆盖类

2 个答案: