Javascript vue js作用域插槽样式错误，带有vue样式的组件

我尝试使用样式设置一个简单的按钮，里面有一些文本，但是样式不起作用，我在父组件中遇到了scopedSlots问题

这是

component.js

import styled from 'vue-styled-components';

export const sLabel = styled.label`

  color: #000;
`;

export const sButton = styled.div`

  height: 1rem;
  width: 2rem;
  background-color: #000;

  ${sLabel} {
    color: #fff;
  }
`;

这是我页面中的代码

<template>

  <sButton>
    <sLabel>Button</sLabel>
  </sButton>

</template>

<script>

import { sButton, sLabel } from './component.js'

export default {
  components: {
    sButton,
    sLabel
  }
}

</script>

但是如果我只使用这个代码，它就可以工作

export const sButton = styled.div`

  height: 1rem;
  width: 2rem;
  background-color: #000;

  label {
    color: #fff;
  }
`;

如果在子组件之前声明父组件，即使样式位于子组件之下，也会将样式应用于父组件

export const sButton = styled.div`

  height: 1rem;
  width: 2rem;
  background-color: #000;

  ${sLabel} {
    color: #fff;
  }
`;

export const sLabel = styled.label`

  color: #000;
`;

有人能告诉我我的代码哪里不正确，是什么导致了这些问题吗

export const sButton = styled.div`

  height: 1rem;
  width: 2rem;
  background-color: #000;

  ${sLabel} {
    color: #fff;
  }
`;

export const sLabel = styled.label`

  color: #000;
`;