我在我最新的React项目里封装了一个Layout组件来封装一个包裹页面内容和导航栏的样式。
并且使用React第三方styled-components库编写样式。
这里我为了为了使用position:fixed固定底部的Nav组件和某些页面头顶需要的组件，所以规定了Wrapper拥有上下padding。可是有的页面我没有上部需要固定的组件，那么这个padding-top:55px就是多余的，页面顶部将出现空白。使用styled-components库该怎么修改这个封装好的样式呢？
根据styled-components库的文档，我得知有一个Extending Styles的写法。
可以看到，样式可以扩展，并且修改，添加。
于是我将Layout组件的样式进行封装成为一个LayoutStyle.tsx的文件。
并对样式进行拆分export。
可以看到我扩展了一个叫LabelWrapper的div标签样式，扩展继承于Wrapper，并且设定padding-top:0。
接下来在不需要有上padding的页面，不要引入Layout组件，而是拆开变成
本应包裹在最外面的标签
Wrapper被我替换成了LabelWrapper，这样LabelWrapper不仅包含了Wrapper的所有样式，并且有自己独立的样式。就能达成我想要的效果了。
