{"id":20892832,"url":"https://github.com/commanderxl/mp-style-scope","last_synced_at":"2026-04-19T21:38:15.792Z","repository":{"id":218663338,"uuid":"697574339","full_name":"CommanderXL/mp-style-scope","owner":"CommanderXL","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-23T06:08:54.000Z","size":245,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T11:43:33.497Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CommanderXL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-09-28T02:52:13.000Z","updated_at":"2023-09-28T03:10:59.000Z","dependencies_parsed_at":"2024-01-23T07:24:51.169Z","dependency_job_id":"ca5a781b-09f3-4ba7-a093-844be1862ee0","html_url":"https://github.com/CommanderXL/mp-style-scope","commit_stats":null,"previous_names":["commanderxl/mp-style-scope"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CommanderXL%2Fmp-style-scope","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CommanderXL%2Fmp-style-scope/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CommanderXL%2Fmp-style-scope/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CommanderXL%2Fmp-style-scope/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CommanderXL","download_url":"https://codeload.github.com/CommanderXL/mp-style-scope/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243277501,"owners_count":20265352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T10:14:03.681Z","updated_at":"2025-12-26T21:50:49.974Z","avatar_url":"https://github.com/CommanderXL.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# style-scope\n\n## Project setup\n\n```javascript\n// development\nnpm run serve // 小程序本地开发构建\n```\n\n代码编译后会同时输出微信和支付宝2个平台，可同时打开2个平台的开发者工具预览，最终的产出物在 `dist` 目录当中\n\n### 微信和支付宝样式隔离场景：\n\n**在 mpx 做基于微信跨支付宝小程序的开发过程中，为了和微信小程序默认的样式隔离特性保持一致，我们尝试将支付宝所有的页面/组件设置 `styleIsolation: \"apply-shared\"`。以下的异同点也是基于这个前提去梳理出来的**\n\n不过在解除样式隔离的情况下遇到如下几种2个平台不太能保持表现一致的场景：\n\n1. Page 和 Component 之间的样式影响：\n\n场景一：（demo 当中的示例1）\n\n在微信环境下，只需要设置 component 的 `styleIsolation: \"apply-shared\"`，页面的配置不需要做任何改动，页面的样式规则即可直接影响这个 component。\n\n在支付宝环境下，因为页面和组件都默认为 `styleIsolation: \"apply-shared\"`，那么如果想要页面的样式规则可以影响到 component，那么改动的方式是设置页面的 `styleIsolation: \"shared\"` （或者删除这个配置）。\n\n此外在这个场景当中，微信和支付宝的改动对于其他组件的影响范围也不太能一致：\n\n微信环境页面的样式只会影响到当前这个改动了 `styleIsolation: \"apply-shared\"` 配置的组件，而不会影响到其他默认走样式隔离的组件。\n\n在支付宝环境下，因为页面的配置改为了 `styleIsolation: \"shared\"`，这也意味着页面的样式规则会影响到这个页面所引用的所有的组件。\n\n场景二：\n\n微信自定义组件的 `styleIsolation: \"shared\"` 配置也可以让页面样式规则影响到组件，而在支付宝的场景如果将自定义组件的配置改为 `shared`，页面的样式规则也不会影响到组件自身，除非将页面的配置改为 `shared`。\n\n\n2. Component 和 Component 之间的样式影响（demo 当中的示例2）\n\n微信和支付宝目前在自定义组件之间的样式解除策略基本一致：`shared` 去影响 `apply-shared` 或者 `shared`。\n\n不过在影响范围这块不太能保持一致：在微信环境下，配置了 `styleIsolation: \"shared\"` 的组件只会影响到 `shared` 或者 `apply-shared` 组件，但是不会影响其他走默认样式隔离的组件。在支付宝环境只要设置了 `styleIsolation: \"shared\"` 的组件都会影响到其他的组件样式。\n\n\n\n![style-scope](https://dpubstatic.udache.com/static/dpubimg/9LHreHGH8tUrrS_8cTe9G_style-scope-1.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommanderxl%2Fmp-style-scope","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommanderxl%2Fmp-style-scope","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommanderxl%2Fmp-style-scope/lists"}