使用styled-components在JS文件编写CSS时圆形样式未生效问题

• 确认styled-components依赖正确安装
  该组件依赖styled-components运行时支持，先检查项目package.json的dependencies字段是否包含该依赖，若缺失执行npm install styled-components完成安装即可。
• 核对定位规则是否导致元素偏移出可视区
  Wrapper组件使用了position: absolute绝对定位，该定位会相对于最近的非static定位的父元素偏移，若所有父元素均为默认static定位，元素会相对于整个页面视口偏移。你设定的top: 20px、left: 20px/380px可能超出了当前可视区域范围，可临时将position属性改为relative测试元素是否正常渲染。
• 排查全局样式覆盖问题
  打开浏览器开发者工具元素面板，选中Wrapper对应的渲染DOM节点，查看计算样式中的width、height、border-radius属性是否和设定值一致，确认是否有优先级更高的全局CSS规则（如通用div样式、CSS重置规则）覆盖了当前组件的样式。
• 检查背景色是否和父容器融合
  若Wrapper的背景色和父容器背景色完全一致，会导致圆形视觉上不可见，仅能显示内部文字。可临时将background属性修改为固定测试值比如background: red;验证是否能看到圆形。如果是该问题，调整背景色配置或者确认调用Lamp组件时正确传递了lampOn属性即可。

内容的提问来源于stack exchange，提问作者Sean Burnett