CSS 模块和 CSS in JS 是两种在 JavaScript 应用中局部应用 CSS 样式的方法。它们的主要目标是解决全局 CSS 作用域的问题，使样式只应用于特定的组件或元素，避免样式冲突。
- CSS 模块
CSS 模块是一种将 CSS 转换为局部作用域的方法。在 webpack 这样的模块打包器中，你可以使用 CSS Modules 来实现这个目标。
操作步骤如下：
- 首先，你需要将 CSS 文件命名为
.module.css（例如styles.module.css）。 - 然后，在你的 JavaScript 或 React 组件中，你可以像导入其他模块一样导入这个 CSS 模块。例如：
import styles from './styles.module.css';。 - 导入后，你可以使用
styles.[className]的方式来应用样式。例如：<div className={styles.myClass}>Hello World</div>。这样，myClass就只会在这个组件中生效，不会影响到其他组件。
- CSS in JS
CSS in JS 是一种将 CSS 样式直接写在 JavaScript 中的方法。这种方法的好处是可以充分利用 JavaScript 的动态性，实现更灵活的样式控制。同时，由于样式是直接在组件中定义的，所以它们自然就是局部作用域的。
当然，如果在 React 中，有很多库可以实现 CSS in JS，例如 styled-components 和 emotion。
以 styled-components 为例，操作步骤如下：
- 首先，你需要安装 styled-components：
npm install styled-components。 - 然后，在你的组件文件中，你可以使用
styled.[HTML element]或styled(Component)的方式创建一个带有样式的元素或组件。例如：const StyledDiv = styled.div{ color: red; }``。 - 创建后，你就可以像使用普通组件一样使用这个带有样式的组件了。例如：
<StyledDiv>Hello World</StyledDiv>。这样，这个 div 的文字颜色就会是红色，而且这个样式只会在这个组件中生效。
如何在vue3中使用
1. 创建 Vue 项目
如果你还没有 Vue 项目，可以使用 Vue CLI 创建一个新的项目：
vue create my-vue-app
cd my-vue-app
选择你需要的配置选项，或者使用默认配置。
2. 创建一个 Vue 组件
在 src/components 目录下创建一个新的 Vue 组件，比如 MyComponent.vue。
3. 添加 CSS Module
在 src/assets 目录下创建一个 CSS Module 样式文件，命名为 myComponent.module.css。在这个文件中，定义一些样式：
/* src/assets/myComponent.module.css */
.container {
padding: 20px;
background-color: lightgray;
}
.title {
font-size: 24px;
font-weight: bold;
color: darkblue;
}
4. 在 Vue 组件中使用 CSS Module
回到 MyComponent.vue 文件，导入刚才创建的 CSS Module，并在模板中使用这些样式：
<template>
<div :class="$style.container">
<h1 :class="$style.title">Hello, Vue with CSS Modules!</h1>
</div>
</template>
<script>
export default {
name: 'MyComponent',
}
</script>
<style module>
@import '@/assets/myComponent.module.css';
</style>
注意，在 <style> 标签中使用了 module 属性，这告诉 Vue Loader 将这个样式块作为 CSS Module 来处理。然后，你可以通过 $style 对象来访问这些类名。
然而，上面的导入方式可能并不会按预期工作，因为 Vue Loader 不直接支持在 <style> 标签内使用 @import 导入 CSS Module。相反，你应该直接在 <style module> 块内编写 CSS，或者通过 JavaScript 导入 CSS Module。
为了解决这个问题，我们可以在 JavaScript 部分导入 CSS Module，并通过计算属性将其暴露给模板：
<template>
<div :class="styles.container">
<h1 :class="styles.title">Hello, Vue with CSS Modules!</h1>
</div>
</template>
<script>
import styles from '@/assets/myComponent.module.css'
export default {
name: 'MyComponent',
computed: {
styles() {
return styles;
}
}
}
</script>
<!-- 这里不再需要 <style module>，因为我们已经在 JavaScript 中导入了样式 -->
5. 在 App 中使用组件
最后，在你的主应用组件（通常是 App.vue）中使用这个带有 CSS Module 的组件：
<template>
<div id="app">
<MyComponent />
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
export default {
name: 'App',
components: {
MyComponent
}
}
</script>
现在，当你运行你的 Vue 应用时，你应该能看到一个带有灰色背景和深蓝色标题的消息框，这些样式是局部应用于 MyComponent 组件的。
