javascript - 在 Vue Scoped scss 上没有显示 Flex 属性，为什么？

Question

嗨，我有以下带有 vue 公式的代码

  <template>
  <div class="repeatable-container">
    <FormulateForm>
      <FormulateInput type="text" label="strength" placeholder="strength" />
      <FormulateInput type="select" label="Quantity" placeholder="strength" />
      <FormulateInput
        type="select"
        label="Method of intake"
        placeholder="strength"
      />
      <span>Remove Dossage</span>
    </FormulateForm>
  </div>
</template>

<script>
export default {
  name: "RepeatableGroup",
};
</script>

//When scoped on style flex property of .formulate-input-wrapper is not taking but it takes if i remove it ,Can any body got idea? 
<style lang="scss" scoped >
.repeatable-container {
  .formulate-form,
  .formulate-input-wrapper {
    display: flex !important;
  }
}
.formulate-input-wrapper {
  display: flex !important;
}
</style>

这是图像

样式的范围属性

没有 style flex 属性的 scoped 属性是可访问的

标签： javascriptvue.jssass

Answer 1

那是因为有了scoped，父组件的样式不会泄漏到子组件中。