0

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

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

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

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

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

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

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

4

2 回答 2

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

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

于 2018-05-24T17:27:41.603 回答
0

而不是这个：

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

尝试这个：

.button{
  @media print {
    display: none;
  }
}
于 2019-10-21T14:02:21.550 回答