Question

我尝试使用vue-styled-compoenents设置内部带有一些文本的简单按钮的样式，但是样式不起作用，并且在父组件中出现了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>

这是我在sButton样式下得到的结果，而在sLabel下没有任何结果

), scopedSlots: this.$scopedSlots

但是，相反，如果我仅使用此代码，它将起作用。

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;
`;

有人可以告诉我我的代码不正确以及什么原因导致这些问题吗？

具有vue样式的组件的vue js作用域内的插槽样式错误

0 个答案: