Модули CSS - печать таблицы стилей - как переопределить классы

Question

Как создать таблицу стилей печати, которая может переопределять динамические стили, созданные модулями CSS?

Используя модули CSS, имена классов отображаются с уникальными именами, например:

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

В моей таблице стилей печати у меня есть следующее, которое не имеет никакого эффекта:

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

Я могу заставить его работать, добавив !important к стилю кнопки, но у меня будет много стилей печати, и я не хочу делать это для каждого атрибута стиля. Есть ли альтернатива?

Я также использую React, если здесь есть подход, специфичный для React.

Answer 1

Завелся делать следующее:

Используйте! Важное для глобальных переменных, которым необходимо переопределить локальные значения:

/* 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;
  }
}