Different styles in same component, only in gatsby build version - reactjs

Question

I have Navigation component that is the same at every page of my gatsby website. In development mode every styles are working properly. Button in dev mode on every page:
But in production build of gatsby only on home page ("/") it looks like that:
In production mode, on every page it works like in develop except home page, on home page styles are not apply only on this one button. And i have no idea why.
This is how Navigation component looks like:
const NavigationSearchBar = () => {
const { isMobile, windowWidth } = useResize()
const { setSearch } = useNavigationSearchBar()
return (
<StyledContainer>
<Row>
{!isMobile && (
<Col md="2">
<NavbarBrand href="/">
<img src={'/images/logo.svg'} />
</NavbarBrand>
</Col>
)}
<StyledSearchBar sm="12" md={{ size: 6, offset: 2 }}>
<StyledForm>
<SearchInput
type="text"
name="search"
onChange={e => setSearch(e.target.value)}
/>
<SimpleButton width="160px" background="primary" color="whiteColor">
Search
</SimpleButton>
</StyledForm>
</StyledSearchBar>
<StyledCol2 sm="12" lg="2">
<SimpleButton
width={windowWidth >= 400 ? '160px' : '100%'}
background="primaryOrange"
color="blackColor"
>
On Sale
</SimpleButton>
</StyledCol2>
</Row>
</StyledContainer>
)
}
export default NavigationSearchBar
Nothing special, there is no business logic here. This is how styles in styled components looks like for this button:
const SimpleButton = styled.button`
width: ${({ width }) => width};
background: ${({ background }) =>
theme.colors[background] ? theme.colors[background] : background};
padding: ${({ padding }) => (padding ? padding : '0.5rem 0')};
text-align: center;
border: 1px solid
${({ background }) =>
theme.colors[background] ? theme.colors[background] : background};
border-radius: 8px;
text-transform: uppercase;
color: ${({ color }) => (theme.colors[color] ? theme.colors[color] : color)};
letter-spacing: 1.5%;
font-weight: ${theme.fontWeights.medium};
position: relative;
z-index: 1;
`
I think it could be some issue with gatsby build process, because everything except this one button in production mode styles the same way as in development mode.
Do you have any idea why it's not working ?
I've just noticed that on refresh there is no styles, but if i get on page through gatsby link inside application styles are applied. For example if i'm on page /login every styles are applied, but when i refresh by clicking F5 gatsby enters /login/ and every styles disappear (this happens only in production mode).

Answer 1

I forget to install styled-components plugin for gatsby.
On develop everything working correctly, but on build version issues starts off.
Todo:
npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components
And don't forget to add plugin to gatsby-config.js file:
module.exports = {
/* Your site config here */
plugins: [
....other plugins
'gatsby-plugin-styled-components',
],
}