uni-app vue3 H5端用标签名写样式，不生效
uni-app vue3 H5端用标签名写样式，不生效
产品分类：uniapp/H5
PC开发环境操作系统：Mac
PC开发环境操作系统版本号：13.6.7
浏览器平台：Edge
浏览器版本：版本 127.0.2651.74 (正式版本) (arm64)
项目创建方式：CLI
CLI版本号：3.0.0-4020920240930001
示例代码：
<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用标签名写样式，不生效
4 回复
在uni-app中使用Vue 3开发H5应用时，如果你发现通过标签名直接写样式不生效，这通常是由于样式作用域或者样式优先级的问题。在Vue 3和uni-app中，组件的样式默认是作用域样式（scoped），这意味着样式只会应用到当前组件内相同标签名的元素上。如果你希望样式全局生效或者覆盖默认行为，可以采取以下几种方法：
1. 使用全局样式
在App.vue或单独的全局样式文件中定义样式，这样可以确保样式在整个应用中生效。
/* 在 App.vue 或 global.css 中 */
div {
color: red;
}
2. 移除 scoped 属性
如果你只想在某个组件中让样式生效到所有相同标签名的元素，可以移除该组件<style>标签上的scoped属性。
<template>
<div>This div will be red</div>
</template>
<style>
div {
color: red;
}
</style>
3. 使用深度选择器（>>> 或 /deep/）
如果你在使用<style scoped>但仍然希望样式能穿透到子组件，可以使用深度选择器。不过这种方法更多用于子组件内部元素的样式覆盖，而不是直接通过标签名。
<template>
<child-component></child-component>
</template>
<style scoped>
/* 假设 child-component 内部有一个 <div> */
child-component >>> div {
color: red;
}
/* 或者使用 /deep/ */
child-component /deep/ div {
color: red;
}
</style>
4. 使用全局类选择器
为元素添加一个全局类名，并在全局样式中定义该类。
<template>
<div class="global-class">This div will be red</div>
</template>
<style>
/* 在全局样式文件中 */
.global-class {
color: red;
}
</style>
5. 确保样式加载顺序
如果样式不生效，也可能是因为样式加载顺序的问题。确保你的样式文件被正确引入，并且加载顺序符合你的预期。
// 在 main.js 或 app.js 中引入全局样式
import './assets/styles/global.css';
通过上述方法，你应该能够解决通过标签名写样式不生效的问题。如果问题依旧存在，请检查是否有其他CSS规则（如更具体的选择器）覆盖了你的样式。
