Search code examples
cssreactjsstyled-components

Hide button on small devices using Styled Components

I have a React app and I want to hide certain buttons from the header when viewed from a small device. I am styling everything through Styled Components.

I am trying to make a media query like this, to hide the button if the screen is greater than 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;
  }
`;

However this is not working (and I can understand why from a CSS point of view)...I am trying to find for Styled Component relevant examples but was not successful.

Solution

  • So I confirmed that my media query is actually right. The reason it did not work is because styled-components was simply ignoring it. I overrode the default behaviour as follows:

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