styled-components doesnt work with hot reloading?

[bradennapier]

Could be doing this wrong but I can't get this to hot reload at all. Updating the text inside of the Header works but the styled component updates do not do anything:

import styled from 'styled-components';
import './index.css';

import WCICON from '../images/wcicon.png';

const Wrapper = styled.div`
  display: flex;
  height: 75px;
  max-width: 960px;
  padding: 1.45rem 1.0875rem;
  margin: 0 auto;
  width: 100%;
`;

const StickyHeader = styled.div`
  position: sticky;
  top: 0px;
  background: #21242b;
  margin-bottom: 1.45rem;
  height: 75px;
  contain: strict;
`;

const Header = () => (
  <StickyHeader>
    <Wrapper>
      <img src={WCICON} height="40px" alt="Alt" />
      <h1
        style={{ margin: 0, marginLeft: 20, textShadow: '1px 1px 1px black' }}
      >
        <Link
          to="/"
          style={{
            color: 'white',
            textDecoration: 'none',
          }}
        >
          Title
        </Link>
      </h1>
    </Wrapper>
  </StickyHeader>
);

[KyleAMathews]

Yeah, this is a bug in styled-components #2599

[nexusondesign1]

This is the solution to fix that actually provided by gatsby but it's not easy to find it.

After Adding to gatsby-config.js

resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
      },
    },

and adding to package.json as dependencies those fixes the hard reload issue on export.
"gatsby-plugin-styled-components": "^3.3.0", "styled-components": "^5.1.0"

also added
"devDependencies": { "babel-plugin-styled-components": "^1.10.7" }

Edit: don't forget to do npm install after those changes to get the packages.

Drop Like if that helps someone that uses gatsby and styled-components when questions let me know.