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

【问题标题】：CSS modules - print stylesheet - how to override classesCSS 模块 - 打印样式表 - 如何覆盖类
【发布时间】：2017-11-03 06:07:33
【问题描述】：

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

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

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

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

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

我可以通过将!important 添加到按钮样式来使其工作，但我将有许多打印样式，我不想为每个样式属性都这样做。有替代方案吗？

如果这里碰巧有特定于 React 的方法，我也会使用 React。

【问题讨论】：

你有没有想过这个问题？
@Fastmover 我找到了一些处理它的方法，我在下面添加了一个答案。

标签： css-modules react-css-modules

【解决方案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>
  );
};

（这第三个选项就在我的脑海中，我不知道它是否会起作用）

【讨论】：

【解决方案2】：

而不是这个：

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

试试这个：

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

【讨论】：