{"id":19438243,"url":"https://github.com/opensumi/antd-theme","last_synced_at":"2025-10-20T10:02:57.729Z","repository":{"id":43179271,"uuid":"440147862","full_name":"opensumi/antd-theme","owner":"opensumi","description":"Ant Design Theme for OpenSumi","archived":false,"fork":false,"pushed_at":"2024-09-26T08:00:19.000Z","size":2812,"stargazers_count":5,"open_issues_count":3,"forks_count":2,"subscribers_count":20,"default_branch":"main","last_synced_at":"2024-10-31T17:45:31.490Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opensumi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.en-US.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-20T11:35:57.000Z","updated_at":"2023-01-31T19:23:11.000Z","dependencies_parsed_at":"2023-02-16T03:25:16.725Z","dependency_job_id":null,"html_url":"https://github.com/opensumi/antd-theme","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fantd-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fantd-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fantd-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fantd-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opensumi","download_url":"https://codeload.github.com/opensumi/antd-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223968338,"owners_count":17233472,"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-10T15:17:28.177Z","updated_at":"2025-10-20T10:02:57.647Z","avatar_url":"https://github.com/opensumi.png","language":"Less","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenSumi Ant Design Theme\n\n![Theme](./images/antd-theme.png)\n\n## Usage\n\n### css external\n\n```js\nimport '@opensumi/antd-theme/lib/index.css';\n```\n\n```jsx\nimport { ConfigProvider } from 'antd';\n\n// ...\n\nreturn (\n  \u003cConfigProvider prefixCls=\"sumi_antd\"\u003e\n    \u003cApp /\u003e\n  \u003c/ConfigProvider\u003e\n);\n```\n\n## Developement\n\n- 找到你要覆盖的 antd 组件\n- 在 `src` 下新建一个 `${组件名}.less`\n- 在 `src/index.less` import 这个文件\n- npm run start 即可开始开发对应组件\n\n### Tips\n\n- `antd.less` 基本涵盖 antd 中所有的变量和值，可供快速参考查阅\n- 更完整的 antd 的 less 变量请参见 antd repo 源码\n- [Open Sumi Tokens 表](https://github.com/opensumi/core/wiki/%E5%9F%BA%E7%A1%80%E9%A2%9C%E8%89%B2)\n\n### Thank You\n\n- [vagusX](https://github.com/vagusX)\n- [suyu34](https://github.com/suyu34)\n\n## FAQ\n### 根节点错误导致样式失效问题\n在 Antd 组件库中，对于 Dialog、Overlay、Popover 等组件会通过在顶层通过 createPortal 的方式在 组件树顶层插入根节点。当插件注册的视图中使用到这些组件时，由于 portal 的特性，会导致这类组件被插入在插件视图槽（即插件 ShadowDOM）外部，而又因为 ShadowDOM 的隔离性，插件中对这类组件的自定义样式都无法生效，因为插件的 head 样式只会被插入到它自身所在的 ShadowDOM 内。\n\n在 Antd 中，这类组件一般会提供一个 getContainer 的 props，用于指定它们所挂载的 DOM 根节点，可以将 container 设置为插件所注册组件的根元素，例如\n\n```jsx\n// antd Modal\nimport Modal from 'antd/lib/modal';\n\nconst MyPanel = () =\u003e {\n  const rootRef = React.createRef();\n    return (\u003cdiv ref={rootRef}\u003e\n    \u003cModal getContainer={() =\u003e rootRef.current}\u003e{content}\u003c/Modal\u003e\n  \u003c/div\u003e\n};\n\n\n// antd Popover\n\nimport Popover from 'antd/lib/popover';\n\nconst MyPanel = () =\u003e {\n  const rootRef = React.createRef(null);\n    return (\u003cdiv ref={rootRef}\u003e\n    \u003cPopover getPopupDomNode={() =\u003e rootRef.current}\u003e{content}\u003c/Popover\u003e\n  \u003c/div\u003e\n};\n```\n\n### 合成事件问题\n由于 React 基于事件委托实现的合成事件依赖 DOM 树根节点，在某些组件中(如 antd/popover) 可能无法捕获到其子组件冒泡上来的事件，这会导致这类组件的子组件们事件处理程序失效，建议使用 [react-shadow-dom-retarget-events](https://www.npmjs.com/package/react-shadow-dom-retarget-events) 手动将事件委托的根节点指定到上述的 container 组件中，例如\n```jsx\nimport Popover from 'antd/lib/popover';\nimport retargetEvents from 'react-shadow-dom-retarget-events';\n\nconst MyPanel = () =\u003e {\n  const rootRef = React.createRef(null);\n    return (\u003cdiv ref={rootRef}\u003e\n    \u003cPopover getPopupDomNode={() =\u003e {\n    retargetEvents(rootRef.current);\n        return rootRef.current;\n    }}\u003e{content}\u003c/Popover\u003e\n  \u003c/div\u003e\n};\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensumi%2Fantd-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopensumi%2Fantd-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensumi%2Fantd-theme/lists"}