我有以下表单组件:

<template>
    <div>
        <form>
            <input placeholder="Recipe Name">
            <textarea placeholder="Recipe Description..." rows="10"></textarea>
        </form>
    </div>
</template>

<script>
export default {
    name: 'AddRecipeForm'
}
</script>

<style scoped>
form {
    display: flex;
    flex-direction: column;
}
</style>

<style>使用scoped属性.

应用时,将加载CSS does not.当scoped被移除时,它does被apply.

但是,我希望将其保留在组件的本地.

为什么在存在scoped属性时不应用CSS?

推荐答案

由于某些原因,在首次将范围样式添加到组件时,在热重新加载期间不会应用范围样式.完整页面重新加载修复了这个问题,从那里开始,样式在被检测到后,会随着连续的热重新加载而更新.

Css相关问答推荐

如何将另一种自定义位置 colored颜色 添加到三角形CSS中?

CSS子网格不显示行间距

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%,如果溢出,还可以zoom 父元素

靴子,为什么我不能让任何东西正确地排好队?

截断风景中的柔子或强制在其自己的线上,如果是肖像

如何从 WooCommerce 中的 Betheme 图像中删除产品永久链接图标

如果中间元素的内容不适合 CSS,如何将其分隔到新行?

CSS 字符串变量的正确null值是多少?

CSS动画移动divs upwords

子组件的css会影响整个页面

当我在几个月之间更改时,有什么方法可以在react-dates-range上添加淡入淡出或幻灯片效果?

边界半径应该剪辑内容吗?

CSS媒体查询仅针对iPad和iPad?

空的 iframe src 是否有效?

如何在 CSS 中绘制一个圆形扇区?

HTML表格:保持列的宽度相同

go 除文本输入的内阴影

我如何*真正*证明 HTML+CSS 中的水平菜单?

我的 inline-block 元素没有正确排列

如何创建一个带点的
标签?