vue3 中如何调整全局的css样式
时间: 2024-04-29 17:03:49 浏览: 12
在Vue3中,可以通过以下方式调整全局的CSS样式:
1. 在主入口文件(如main.js)中导入CSS文件,例如:
```
import './assets/styles/global.css';
```
2. 在Vue组件中使用CSS Modules,例如:
```
<template>
<div :class="$style.container">
<p :class="$style.text">Hello World!</p>
</div>
</template>
<style module>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 24px;
color: #333;
}
</style>
```
在这种情况下,全局CSS样式不会影响到组件的样式。
3. 使用Vue的全局样式变量。可以在Vue的根实例中定义全局样式变量,例如:
```
const app = createApp({
data() {
return {
primaryColor: '#007bff'
}
}
})
app.provide('theme', {
primaryColor: app.data.primaryColor
})
app.mount('#app')
```
然后在组件中使用全局样式变量,例如:
```
<template>
<button :style="{backgroundColor: $theme.primaryColor}">Click Me</button>
</template>
```
在这种情况下,全局样式变量可以通过provide/inject实现跨组件共享。