uni-app vue3 H5端用标签名写样式不生效

发布于 1周前 作者 caililin 来自 Uni-App

uni-app vue3 H5端用标签名写样式不生效

示例代码：

<view class="content">  
    <image class="logo" src="/static/logo.png"></image>  
    <view class="text-area">  
        <text class="title">{{ title }}</text>  
    </view>  
    <!-- 引入组件 -->  
    <a-date-picker style="width: 200px;"></a-date-picker>  
</view>

操作步骤：

创建工程

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

安装依赖

yarn install

安装arco框架

yarn add --dev @arco-design/web-vue

在main.js引入框架

import {
createSSRApp
} from "vue";
import ArcoVue from '@arco-design/web-vue';
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.less';
export function createApp() {
const app = createSSRApp(App);
app.use(ArcoVue);
app.use(ArcoVueIcon);
return {
app,
};
}

在index.vue 里面引入a-date-picker

运行代码

yarn dev:h5

预期结果：

  • 显示样式

实际结果：

  • 没有样式，完整代码见附件

bug描述：

  • vue3用标签名写样式，不生效

Harmonyos Next教程
3 回复

web 平台使用三方 UI 库，这个是支持的，你判断下是所有的组件都不生效，还是个别组件不生效？手动引入组件正常使用吗


就这个组件有问题，其他组件没有问题，我看了这个组件源码，他里面的input标签是直接设置的样式

在uni-app中使用Vue 3开发H5应用时，如果遇到通过标签名直接写样式不生效的问题，通常是由于作用域CSS（Scoped CSS）或者组件的样式隔离机制导致的。在Vue 3的组件化开发中，为了确保样式的封装性和避免样式冲突，Vue默认使用了Scoped CSS。这意味着在组件的<style>标签中定义的样式只会作用于当前组件的模板内容。

解决方案

1. 使用全局样式

如果需要在多个组件中共享样式，可以将样式定义在全局样式文件中，比如App.vue中的<style>标签（不带scoped属性），或者在main.js中引入的外部CSS文件。

示例：

在App.vue中：

<style>
h1 {
  color: red;
}
</style>

在main.js中引入外部CSS：

import { createApp } from 'vue';
import App from './App.vue';
import './assets/global.css'; // 引入全局样式文件

createApp(App).mount('#app');

2. 深度选择器（Deep Selector）

如果你需要在父组件中覆盖子组件的标签样式，可以使用深度选择器（::v-deep）来穿透作用域CSS的限制。

示例：

父组件：

<template>
  <ChildComponent />
</template>

<style scoped>
::v-deep .child-h1 {
  color: blue;
}
</style>

子组件（ChildComponent.vue）：

<template>
  <h1 class="child-h1">This is a child component heading</h1>
</template>

3. 全局类选择器

确保在H5端使用的标签样式使用了正确的类选择器，而不是仅仅依赖于标签名。标签选择器的作用范围受限于组件的样式隔离，而类选择器则更容易被全局样式或父组件样式覆盖。

示例：

<template>
  <div class="my-heading">This is a heading</div>
</template>

<style scoped>
.my-heading {
  font-size: 24px;
  color: green;
}
</style>

或者在全局样式中：

.my-heading {
  font-size: 24px;
  color: green;
}

通过上述方法，你应该能够解决在uni-app Vue 3 H5端通过标签名写样式不生效的问题。如果问题依旧存在，建议检查是否有其他CSS优先级或覆盖问题，或者是否有其他样式隔离机制（如CSS Modules）在起作用。

回到顶部