【问题标题】:Work-around for Styled-component not working on Internet Explorer 11样式组件在 Internet Explorer 11 上不起作用的解决方法
【发布时间】:2018-06-25 05:54:36
【问题描述】:

我的网络应用程序上有样式组件。

他们工作得很好。除了在 Internet Explorer 11 上。它们完全崩溃了,布局只是一堆水平放置在那里的组件,而不是 flexbox 之类的。

解决此问题的常用方法是什么?我是否应该在 js 代码中以某种方式识别如果浏览器是 IE11,那么我应该只使用内联样式或者是否有某种解决方法来解决这个问题?我试着用谷歌搜索,但没有找到任何确定的东西。

编辑:进一步调查表明原因是这是一个 Angular 项目。实际上这是一个带有 React 视图的 Angular 项目(是的,我知道)并且 React 视图使用样式化组件,这些组件在其他浏览器上运行良好,但我们的客户只使用 IE11,所以我们必须解决这个问题或者干脆放弃样式化组件。

【问题讨论】:

    标签: javascript css flexbox internet-explorer-11 styled-components


    【解决方案1】:

    2020 年更新:

    https://stackoverflow.com/a/59044410/2077884

    显然有一个名为react-app-polyfill 的包可以帮助解决这个问题。如果不安装 react-app-polyfill,我无法让 styled-components/macro 在旧电视上工作。

    core-js and regenerator-runtime and @babel/polyfill and raf polyfills 似乎没有为我解决这个问题。

    【讨论】:

      【解决方案2】:

      前段时间有个大问题:https://github.com/styled-components/styled-components/issues/657

      请注意,那里的代码已经过时,解决方案值得怀疑,因为它可能会破坏其他保证。

      但是,解决方案要么在于阻止其他库卸载或改变 styled-components 样式节点,要么更改它们以使它们对更改更具弹性。

      如果您不使用 SSR,我们即将推出一个 API,允许您指定自定义 DOM 元素以使用 StyleSheetManager 安装样式标签。您可以使用 npm 上的“dev”标签进行尝试。

      除此之外,您可以修改我们的代码,以便我们不会将元素挂载到文档头部。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2016-09-16
        • 2020-10-26
        • 1970-01-01
        • 1970-01-01
        • 2016-10-20
        • 2019-08-12
        • 2014-08-22
        相关资源
        最近更新 更多