Skip to content

fix(runtime): generated <comp /> cannot use style #18877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rdjanuar wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(runtime): generated <comp /> cannot use style #18877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6e6193
fix(runtime): generated <comp /> cannot use style
Feb 9, 2026
de5b5d2
Merge branch 'main' into main
rdjanuar Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/mini-program-example/src/app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@ export default defineAppConfig({
'pages/api/thirdParty/index',
'pages/api/worker/index',
'pages/api/wxml/index',
'pages/performance/index/index'
'pages/performance/index/index',
'pages/style-isolation/index'
],
tabBar: {
color: '#7A7E83',
Expand Down
9 changes: 9 additions & 0 deletions examples/mini-program-example/src/pages/style-isolation/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.red-text {
color: red;
font-size: 40px;
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

px 单位与截图不一致，建议改为 rpx

截图中开发者工具显示的是 font-size: 40rpx，而代码中为 40px。对于微信小程序，rpx 是推荐的响应式单位。

🛠️ 建议修改 
-  font-size: 40px;
+  font-size: 40rpx;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
font-size: 40px;
font-size: 40rpx;
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@examples/mini-program-example/src/pages/style-isolation/index.scss` at line
3, The font-size declaration in index.scss currently uses "40px" which doesn't
match the screenshot; update the unit to "40rpx" (replace the "font-size: 40px"
rule with "font-size: 40rpx") so the style uses the WeChat Mini Program
responsive unit; locate the rule in the style-isolation/index.scss file and
change the unit accordingly.

font-weight: bold;
}

.container {
padding: 20px;
}
54 changes: 54 additions & 0 deletions examples/mini-program-example/src/pages/style-isolation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
render () {
return (
<View className='container'>
<View>Level 1</View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<View>
<Text className='red-text'>Level 21 - Should be RED</Text>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
)
}
}
2 changes: 2 additions & 0 deletions packages/taro-runtime/src/dsl/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,8 @@ export function createRecursiveComponentConfig (componentName?: string) {
const extraOptions: { [key: string]: any } = {}
if (process.env.TARO_ENV === 'jd') {
extraOptions.addGlobalClass = true
} else if (['weapp', 'harmony-hybrid'].includes(process.env.TARO_ENV as unknown as string)) {
extraOptions.styleIsolation = 'apply-shared'
}

return hooks.call('modifyRecursiveComponentConfig',
Expand Down
36 changes: 36 additions & 0 deletions packages/taro-runtime/tests/dsl/common.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { afterEach, describe, expect, test } from 'vitest'

import { createRecursiveComponentConfig } from '../../src/dsl/common'

describe('createRecursiveComponentConfig', () => {
const originalEnv = process.env.TARO_ENV

afterEach(() => {
process.env.TARO_ENV = originalEnv
})

test('should set styleIsolation to apply-shared for harmony-hybrid', () => {
process.env.TARO_ENV = 'harmony-hybrid'
const config = createRecursiveComponentConfig()
expect(config.options?.styleIsolation).toBe('apply-shared')
})

test('should set styleIsolation to apply-shared for weapp', () => {
process.env.TARO_ENV = 'weapp'
const config = createRecursiveComponentConfig()
expect(config.options?.styleIsolation).toBe('apply-shared')
})

test('should not set styleIsolation for other environments (e.g. h5)', () => {
process.env.TARO_ENV = 'h5'
const config = createRecursiveComponentConfig()
expect(config.options?.styleIsolation).toBeUndefined()
})

test('should set addGlobalClass for jd', () => {
process.env.TARO_ENV = 'jd'
const config = createRecursiveComponentConfig()
expect(config.options?.addGlobalClass).toBe(true)
expect(config.options?.styleIsolation).toBeUndefined()
})
})