集成 ant design 后查看器元素损坏答案

【问题标题】：Viewer Elements broken after integrating ant design集成 ant design 后查看器元素损坏
【发布时间】：2020-10-15 17:24:23
【问题描述】：

我刚玩过 ant design，我注意到 ant design 全局样式会覆盖 dom 内的所有元素。所以集成 ant 之后，查看器工具栏发生了变化，而模型浏览器没有改变。

覆盖

.adsk-viewing-viewer * {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important; }

所有查看器元素仅适用于工具栏，不适用于模型浏览器。

解决此问题的唯一方法是禁用 box-sizing:border-box，但这仅适用于浏览器而不是代码。

是否有人面临类似问题或知道解决方法？

谢谢。

【问题讨论】：

标签： autodesk-forge autodesk-viewer

【解决方案1】：

很遗憾，这是一个已知问题，我们没有官方解决方案。在将 Forge Viewer 与 3rd 方 CSS 框架集成时，您将不得不手动覆盖某些查看器 GUI 组件的样式以恢复其原始样式。

在您的特定情况下，您可能需要为 .adsk-viewing-viewer input.search-box 选择器提供新规则以恢复其原始样式，例如：

.adsk-viewing-viewer input.search-box {
    color: #fff;
    background: rgba(34, 34, 34, 0.94);
    border: solid 1px rgba(0, 0, 0, 0);
    border-bottom: solid 1px rgba(34, 34, 34, 0.8);
    height: 34px;
    direction: ltr;
    margin: 0;
    padding: 7px 12px 8px 40px;
    font-size: 12px;
    width: 100%;
    outline: none;
    position: relative;
    box-sizing: border-box;
    line-height: normal;
    z-index: 1;
}

【讨论】：

【解决方案2】：

更新：其实搜索框不是问题。我可以通过覆盖查看器和搜索框的框大小来获得原始样式。

.adsk-viewing-viewer * {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}
.adsk-viewing-viewer .adsk-searchbox input.search-box {
  box-sizing: border-box !important;
}

但我无法让所有模型 div 的“叶子图标”和悬停大小正常工作。

更新：刚刚解决了我的问题：问题是 box-sizing 值。您必须为每个未对齐的元素覆盖它。添加以下内容解决了我的问题：

.adsk-viewing-viewer .treeview lmvheader {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

【讨论】：