Javascript 已设置样式的组件不重新设置组件的样式

我在盖茨比使用

样式化组件“重新样式化”组件时遇到一些问题

“样式化组件”：“^3.3.0”
“盖茨比插件式组件”：“^2.0.11”

我在我的
gatsby配置中得到了
gatsby插件样式化组件
，当我再次通过
styled（）
放置自定义组件时，样式化在所有工具栏上都起作用，例如：

我这里有一个侧栏

import React, { Component } from "react";
import styled from "styled-components";

class Aside extends Component {
  render() {
    return (
      <Sidebar>
        <List>
          <Item>Pintrest 1</Item>
          <Item>Pintrest 2</Item>
          <Item>Pintrest 3</Item>
        </List>
      </Sidebar>
    );
  }
}

const Sidebar = styled.div`
  position: absolute;
  width: 200px;
  left: calc(100% + 20px);

  @media (max-width: 1200px) {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
  }
`;


如图所示


但是它不起作用，也不改变样式。这是对lib
gatsby插件样式化组件的限制还是对样式化组件的限制？还是我误解了
样式化组件的目的

class Aside extends Component {
  render() {
    return (
      <Sidebar className={this.props.className}>
        <List>
          <Item>Pintrest 1</Item>
          <Item>Pintrest 2</Item>
          <Item>Pintrest 3</Item>
        </List>
      </Sidebar>
    );
  }
}

类扩展组件{
render（）{
返回(
品脱1
品脱2
品脱3
);
}
}
要像您链接的示例中那样执行此操作，您需要像下面这样向孩子传递一个className道具：

class Aside extends Component {
  render() {
    return (
      <Sidebar className={this.props.className}>
        <List>
          <Item>Pintrest 1</Item>
          <Item>Pintrest 2</Item>
          <Item>Pintrest 3</Item>
        </List>
      </Sidebar>
    );
  }
}

类扩展组件{
render（）{
返回(
品脱1
品脱2
品脱3
);
}
}

const SideBar = styled(aside)`
  top: 0;
`;

class Aside extends Component {
  render() {
    return (
      <Sidebar className={this.props.className}>
        <List>
          <Item>Pintrest 1</Item>
          <Item>Pintrest 2</Item>
          <Item>Pintrest 3</Item>
        </List>
      </Sidebar>
    );
  }
}