title: Emotion style overruled by antd default style
body: <p>I have a Gatsby project and created a component as such:</p>
  <pre><code>/** @jsx jsx */
  import { jsx, css } from '@emotion/core'
  import styled from '@emotion/styled'
  import { Link } from 'gatsby'
  import React from 'react'
  
  import { AntDesignOutlined } from '@ant-design/icons'
  import { Layout, Typography } from 'antd'
  const AntHeader = Layout.Header
  const { Title } = Typography
  
  type Props = {
    siteTitle: string
  }
  
  const Header: React.FC&lt;Props&gt; = ({ siteTitle }) =&gt; (
    &lt;AntHeader&gt;
      &lt;div&gt;
        &lt;h1&gt;
          &lt;Link to=&quot;/&quot; css={LinkStyle}&gt;
            &lt;AntDesignOutlined /&gt;
            {` `}
            {siteTitle}
          &lt;/Link&gt;
        &lt;/h1&gt;
        &lt;TitleStyled&gt;Title&lt;/TitleStyled&gt;
      &lt;/div&gt;
    &lt;/AntHeader&gt;
  )
  
  Header.defaultProps = {
    siteTitle: ``,
  }
  
  const TitleStyled = styled(Title)`
    color: red;
  `
  
  const LinkStyle = css`
    color: #fff;
  `
  
  export default Header
  
  </code></pre>
  <p>And the style rules result in the TitleStyle being overwritten as in this example:
  <a href="https://i.stack.imgur.com/k8Gn8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k8Gn8.png" alt="enter image description here" /></a></p>
  <p>I have demoed this on the following Gatsby starter: <a href="https://github.com/yusugomori/gatsby-starter-antd-typescript-emotion" rel="nofollow noreferrer">https://github.com/yusugomori/gatsby-starter-antd-typescript-emotion</a></p>
  <p>I am at a loss at what I can do to fix this.</p>