[Style] unocss的样式无法直接应用到组件上的问题，几乎所有组件都不行

[ying-tch]

Bug Type: Style

Environment

• Vue Version: 3.4.29
• Element Plus Version: 2.7.6
• Browser / OS: Chrome
• Build Tool: Vite

Reproduction

Related Component

• el-button
• el-select
• el-input
• el-input-number

Reproduction Link

Element Plus Playground

Steps to reproduce

可以查看playground地址，w-200 在el-input中和el-select中都不生效，el-button只生效了w-120，但是h-80就会被覆盖掉

What is Expected?

跟其它UI框架（ant,arco,navie）一样，unocss效果可直接作用于组件上

What is actually happening?

unocss效果无法作用于组件上

Additional comments

为啥select不能提供一个options的属性，非要再写一个el-option的，然后又在里面写循环

[lanrenbulan]

// 可以这样来提高优先级，一劳永逸
presetUno({
  // `#app`是指main.js里的app.mount('#app')
  important: '#app',
}),

我碰到这个问题的背景:

• vite + autoimport，按需加载
• 顶级路由的component用的import或() => import()。不能用import

import Layout from '~/layout/index.vue'

{
   name: 'main',
    path: '/',
    redirect: '/home',
    component: Layout,
    //component: import('~/layout/index.vue'),
    //component: () => import('~/layout/index.vue'),
    children: routes,
}

[ying-tch]

// 可以这样来提高优先级，一劳永逸
presetUno({
  // `#app`是指main.js里的app.mount('#app')
  important: '#app',
}),

我设想的议题摘要：

• vite + autoimport，按需加载
• 顶级路由的组件用的import或() => import()。不能用import

import Layout from '~/layout/index.vue'

{
   name: 'main',
    path: '/',
    redirect: '/home',
    component: Layout,
    //component: import('~/layout/index.vue'),
    //component: () => import('~/layout/index.vue'),
    children: routes,
}

非常感谢，您帮到我大忙了

[btea]

感谢 @lanrenbulan 的回复。
我看了一下，样式是有的，没生效只是因为被组件默认样式覆盖了。组件内部样式是使用scss写的，并没有用到 unocss。这个只能自己通过提高样式的优先级来进行覆盖。

为啥select不能提供一个options的属性，非要再写一个el-option的，然后又在里面写循环

历史原因吧，从vue2开始组件就是这样的设计，为了不造成 breaking change 保持写法一致，尽量不给迁移用户造成麻烦就沿用了这个写法。

看来问题已经解决了，我就先关闭这个issue了。如果还有其他问题，欢迎评论补充。@ying-tch

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。