Skip to content

[vue] 怎么使css样式只在当前组件中生效？ #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
haizhilin2013 opened this issue Jun 16, 2019 · 17 comments
Open

[vue] 怎么使css样式只在当前组件中生效？ #258

haizhilin2013 opened this issue Jun 16, 2019 · 17 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] 怎么使css样式只在当前组件中生效？
@haizhilin2013 haizhilin2013 added the vue vue label Jun 16, 2019
@wenyejie
Copy link

scoped

2 similar comments
@April-Zheng
Copy link

scoped

@ccllff
Copy link

ccllff commented Jul 4, 2019

scoped

@CaoRuimiao
Copy link

<style scoped> </style>

@Ricemonster
Copy link

scoped

@qp97vi
Copy link

qp97vi commented Aug 7, 2019

在style上面写 scoped

@zejunking
Copy link

css module

@Elisony
Copy link

Elisony commented Sep 26, 2019

<style scoped> </style>

@crush2020
Copy link

<style scoped></style>

@yxllovewq
Copy link

在组件.vue的style标签加上scoped属性

@AAA611
Copy link

AAA611 commented Aug 30, 2022

1

scoped

2

css module

3

css in js

@Elisony
Copy link

Elisony commented Aug 30, 2022 via email

@sc950828
Copy link

<style scoped>或者<style module>

@Elisony
Copy link

Elisony commented Sep 23, 2022 via email

@Cai-zhiji
Copy link

作用域样式（Scoped Styles）：

在单文件组件（.vue 文件）中使用 <style> 标签，并为其添加 scoped 属性。

<style scoped>
/* 在这里编写组件的样式 */
</style>

使用作用域样式后，样式规则将被自动添加一个唯一的属性选择器，以确保样式仅应用于当前组件中的元素。

CSS 模块（CSS Modules）

在单文件组件中使用 <style> 标签，并将其设置为 module。

<style module>
/* 在这里编写组件的样式 */
</style>

使用 CSS 模块后，样式将被自动转换为局部作用域，并生成一个唯一的类名，只在当前组件中有效。在组件的模板中，可以通过绑定类名的方式使用这些样式。

<template>
  <div :class="$style.myComponentStyle">...</div>
</template>

@Elisony
Copy link

Elisony commented Jul 5, 2023 via email

@WangLiqing0713
Copy link

< style scoped></style>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
vue vue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests