样式化组件不会在页面加载时应用任何样式

Question

我正在应用页面上使用样式化的组件。代码非常简单：

// styled component
import styled from 'styled-components'

const StyledOrdersPage = styled.div`
  background-color: red;

`
export default StyledOrdersPage

这是组件：

import React, { Component } from 'react';
import StyledOrdersPage from './index.styled.js'

class OrdersPage extends Component {
  render() {
    return (
      <StyledOrdersPage>
        <p>Simple component</p>
      </StyledOrdersPage>
    );
  }
}

export default OrdersPage;

问题是，我的页面上绝对没有样式。

现在，可以使用我的应用的/order路由来访问此页面。如果我导航到主页（/），然后导航到我的订单页面，则会应用样式。但是，如果我重新加载订单页面，所有样式都将消失。

这与样式组件有关吗？还是这只是一些奇怪的路由行为？