Skip to content
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

Jump to bottom

使用JSSDK时，主题样式无法切换 #11730

Open
wlinuxgit opened this issue Mar 9, 2025 · 2 comments
Open

使用JSSDK时，主题样式无法切换 #11730

wlinuxgit opened this issue Mar 9, 2025 · 2 comments
Labels
doc optimizing document need confirm style Bug or PR related to component's style

Comments

@wlinuxgit
Copy link

描述问题：

使用jssdk时，按官网的文档方式，无法切换主题样式

截图或视频：

Image

如何复现（请务必完整填写下面内容）：

  1. 你是如何使用 amis 的？
    JSSDK

  2. amis 版本是什么？ 6.11.0

  3. 粘贴有问题的完整 amis schema 代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>amis main</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="../amis/sdk.css" />
    <link rel="stylesheet" href="../amis/helper.css" />
    <link rel="stylesheet" href="../amis/iconfont.css" />
    <link rel="stylesheet" href="../amis/dark.css" />
    <link rel="stylesheet" href="../amis/antd.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
      html,
      body,
      .app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="root" class="app-wrapper"></div>
    <script src="../amis/sdk.js"></script>
    <script type="text/javascript">
      (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
          type: "page",
          title: "标题",
          body: "Hello World!"
        }
        let amisScoped = amis.embed(
            '#root', 
            amisJSON,
            {},
            {
              theme:"dark"
            }
          );
      })();
    </script>
  </body>
</html>
  1. 操作步骤
    使用上面的代码，同时导入dark.css和antd.css，指定theme为dark时，刷新页面，依旧是显示的antd样式
@github-actions github-actions bot added doc optimizing document style Bug or PR related to component's style labels Mar 9, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 9, 2025

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

@dulinhao
Copy link

你把dark.css放到sdk.css前边试试

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
doc optimizing document need confirm style Bug or PR related to component's style
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dulinhao @wlinuxgit