Кнопка «Скрыть» на небольших устройствах с использованием стилизованных компонентов

Question

У меня есть приложение React, и я хочу скрыть определенные кнопки в заголовке при просмотре с небольшого устройства.Я стилизирую все через Styled Components.

Я пытаюсь создать такой медиа-запрос, чтобы скрыть кнопку, если экран больше 700px:

export const BigScreenButton = styled(Button)`
  color: white !important;
  border: 2px solid white !important;
  border-radius: 3px !important;
  padding: 0 10px;
  margin-left: 10px !important;

  @media screen and (max-width: 700px) {
    display: none;
  }
`;

Однако это не работает (и я могу понять, почему изс точки зрения CSS) ... Я пытаюсь найти соответствующие примеры для Styled Component, но безуспешно.

Answer 1

Итак, я подтвердил, что мой медиа-запрос на самом деле правильный.Причина, по которой это не сработало, заключается в том, что styled-components просто игнорировал это.Я переопределил поведение по умолчанию следующим образом:

export const BigScreenButton = styled(Button)`
  color: white !important;
  border: 2px solid white !important;
  border-radius: 3px !important;
  padding: 0 10px;
  margin-left: 10px !important;

  @media screen and (max-width: 700px) {
    display: none !important;
  }
`;

Answer 2

Это должно работать правильно, кроме:

Я пытаюсь сделать медиа-запрос ... чтобы скрыть кнопку, если экран больше 700px:

Вы должны использовать min-width

@media screen and (min-width: 700px) {
  display: none;
}

Также относящиеся статьи .