Svelte组件中如何直接写样式
2026-05-19 23:09:41
0浏览
收藏
Svelte 组件中直接在顶层 `

style 标签写在 Svelte 组件里能直接生效吗
能,但仅限于 标签与 标签同级(即都在顶层),且未加 global 或 lang 等修饰时,Svelte 会默认启用「CSS 作用域」——也就是样式只影响当前组件内的元素,不会泄漏到其他组件或全局。
为什么写了 style 却没生效
常见原因不是语法错,而是选择器没匹配上实际渲染的 DOM 结构。Svelte 会在编译时给组件内所有元素自动添加一个唯一属性(如 svelte-123abc),同时把你的 CSS 选择器也重写成带该属性的形式。这意味着:
- 直接写
div { color: red; }是有效的(只要组件里真有

