title: CSS hover not working when wrapped with media query
body: <p>I am using <a href="https://necolas.github.io/react-native-web/" rel="nofollow noreferrer">react-native-web</a> and NextJS and want to change the hover styles depending on breakpoint using media queries. Without media queries, this code works on hover:</p>
  <pre class="lang-js prettyprint-override"><code>    packshotHoverHighlighted: {
          ':hover': {
              marginTop: 'calc(-1.3%)',
              marginBottom: 'calc(1.3%)',
              transform: 'scale(1.05)',
          },
          transition: '0.1s ease-in',
  </code></pre>
  <p>But when wrapped with a media query, the properties inside <code>:hover</code> are not present in the DOM, although the media query and <code>transition</code> is:</p>
  <pre class="lang-js prettyprint-override"><code>packshotHoverHighlighted: {
          [`@media (min-width: ${Breakpoint.MD + 1}px) and (max-width: ${Breakpoint.L}px)`]: {
              ':hover': {
                  marginTop: 'calc(-2.5%)',
                  marginBottom: 'calc(2.5%)',
                  transform: 'scale(1.09)',
              },
              transition: '0.1s ease-in',
          },
  </code></pre>
  <p>Why does <code>:hover</code> work when used without a media query but doesn't work when used with one?</p>