在 Wot UI (Wot Design Uni) 中，custom-class 样式不生效通常是因为‌微信小程序的样式隔离机制‌或‌CSS 选择器优先级/作用域‌问题。

在 Wot UI (Wot Design Uni) 中，custom-class 样式不生效通常是因为‌微信小程序的样式隔离机制‌或‌CSS 选择器优先级/作用域‌问题。

根据搜索结果、、、，以下是导致该问题的核心原因及解决方案：

核心原因分析
样式隔离 (Style Isolation)‌：微信小程序默认开启样式隔离，父组件的 scoped 样式无法直接穿透到子组件内部，即使使用 :deep() 在某些情况下也可能失效、。
Custom Class 绑定机制‌：custom-class 属性通常是将类名添加到组件的‌根节点‌上。如果你的选择器 .num-operation :deep(.input-style) 试图定位根节点内部的元素，而 input-style 实际上只存在于根节点，或者被组件内部更具体的样式覆盖，则不会生效、。
Scoped 与 Deep 的限制‌：在小程序端，:deep() 的行为与 H5 不同，有时无法正确编译或匹配、。
解决方案
方案一：使用 styleIsolation: ‘shared’ (推荐)

这是解决微信小程序第三方组件样式失效最彻底的方法。在你的‌父组件‌（即包含 wd-input 的页面或组件）的

typescript

添加此配置后，你原有的 CSS 写法可能仍然需要调整，因为 custom-class 是加在根元素上的。

方案二：修正 CSS 选择器

custom-class=“input-style” 会将 input-style 类名添加到 wd-input 组件的‌最外层根节点‌上，而不是内部的 标签上。

如果你希望修改输入框本身的宽高，通常直接修改根节点即可（因为 wd-input 根节点通常就是包裹层）。但如果你发现样式被内部默认样式覆盖，可以尝试以下写法：

修改前（可能无效）：‌

scss
.num-operation {
:deep(.input-style) {
width: 50rpx;
height: 50rpx;
border: 1rpx solid #eee;
}
}

修改后（建议）：‌
由于 styleIsolation: ‘shared’ 已启用，你可以直接使用后代选择器，或者确保选择器权重足够。注意 wd-input 内部可能有固定的宽高设置，可能需要 !important 或更具体的路径。

scss

方案三：检查 wd-input 是否支持 custom-style

部分 Wot UI 组件支持 custom-style 属性直接传入行内样式，这比 class 优先级更高且不受作用域影响。

html
<wd-input
type=“number”
v-model=“value”
no-border
placeholder=“请输入”
custom-class=“input-style”
custom-style=“width: 50rpx; height: 50rpx; border: 1rpx solid #eee;”
@input=“handleInput”
/>
总结
首选方案‌：使用 defineOptions({ options: { styleIsolation: ‘shared’ } }) 解除隔离，然后正常编写 CSS、。
原因‌：微信小程序默认隔离导致 :deep() 失效、。
注意‌：custom-class 作用于组件根节点，需确保选择器路径正确。