pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

样式不兼容 ,大家怎么解决的?

Open zouyi741599086 opened this issue 3 years ago • 7 comments

用了prolayou,发现常用的搜狗浏览器不兼容很多样式,大家都这样?还是怎么解决(自己修改样式)?

padding-inline padding-block inset-inline-end inset-block-start

zouyi741599086 avatar Oct 12 '22 05:10 zouyi741599086

// 内容区域宽度
.ant-pro-page-container .ant-pro-page-container-warp-page-header~.ant-pro-grid-content.ant-pro-page-container-children-content {
  margin: 6px !important;
  height: '100%';
  padding-inline:9px !important;
}

mushroomlb avatar Oct 12 '22 06:10 mushroomlb

// 内容区域宽度
.ant-pro-page-container .ant-pro-page-container-warp-page-header~.ant-pro-grid-content.ant-pro-page-container-children-content {
  margin: 6px !important;
  height: '100%';
  padding-inline:9px !important;
}

好像还有好多组件都不兼容了

pangxzi avatar Oct 13 '22 01:10 pangxzi

是不是用了 Umi4 打包的,如果是 去 umi 那边翻下文档,有解法。cssMinifier: 'cssnano'

drizzlesconsin avatar Oct 13 '22 13:10 drizzlesconsin

是不是用了 Umi4 打包的,如果是 去 umi 那边翻下文档,有解法。cssMinifier: 'cssnano'

我是用create-react-app 构建的应用,我也去看了下umi的cssMinifier配置,这只是配置css压缩的 问题是很多样式不兼容,不是配置压缩的问题,我看了下antd5官网:https://next.ant.design/components/overview-cn/ 搜狗浏览器浏览的时候全部错乱(谷歌、火狐正常),v5的组件如果都用了这些不兼容的样式话那恼火了

zouyi741599086 avatar Oct 14 '22 01:10 zouyi741599086

v5 开始好像不支持 IE11 了 https://github.com/ant-design/ant-design-pro/issues/10181#issuecomment-1256897120 https://github.com/ant-design/ant-design-pro/issues/9958#issue-1285170228

删除的功能

区块功能 删除对 IE 的支持,如果对 IE 有需求,请使用旧版本,(react,antd 都将不支持的 ie11)

drizzlesconsin avatar Oct 14 '22 01:10 drizzlesconsin

v5 开始好像不支持 IE11 了 ant-design/ant-design-pro#10181 (comment) ant-design/ant-design-pro#9958 (comment)

删除的功能

区块功能 删除对 IE 的支持,如果对 IE 有需求,请使用旧版本,(react,antd 都将不支持的 ie11)

360的极速模式也不支持

pangxzi avatar Oct 14 '22 01:10 pangxzi

太低版本的浏览器也不提供支持了, 让我们的维护成本太高了

极速浏览器最高也就 78 内核,无力吐槽

chenshuai2144 avatar Oct 14 '22 02:10 chenshuai2144

太低版本的浏览器也不提供支持了, 让我们的维护成本太高了

极速浏览器最高也就 78 内核,无力吐槽

pro-components 不能和antd一样进行进行降级处理吗。 antd的文档:https://ant-design.gitee.io/docs/react/compatible-style-cn

Tzng avatar Feb 15 '23 06:02 Tzng

支持的用法相同

chenshuai2144 avatar Feb 15 '23 06:02 chenshuai2144

支持的用法相同

我看您在另一个issue进行了回复:https://github.com/ant-design/pro-components/issues/6195

你提到说_要用 ProComponents 的 ProConfigVide_请问一下,这个配置是在哪,我在文档中没有找到它的配置项

Thanks♪(・ω・)ノ

Tzng avatar Feb 15 '23 06:02 Tzng

我也遇到了类似的问题,在最新版本的浏览器上显示正常,但在老版本(如83版本的chromium)上显示异常,最后通过参考https://umijs.org/docs/api/runtime-config#rootcontainerlastrootcontainer-argshttps://ant.design/docs/react/compatible-style-cn基本解决。

方法就是在src/app.tsx添加下面的函数:

export function rootContainer(container) {
  return (
  <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
    {container}
  </StyleProvider>
);
}

wushangwei avatar Mar 02 '23 01:03 wushangwei

我也遇到這個問題了 但是依照官網的方式添加 <StyleProvider /> 後 沒有效果

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    {/* <ConfigProvider theme={{ hashed: false }}> */}
      <StyleProvider
        hashPriority="high"
        transformers={[legacyLogicalPropertiesTransformer]}
      >
      <RouterProvider router={router} />
      </StyleProvider>
    {/* </ConfigProvider> */}
  </React.StrictMode>
)

反而是加了 <ConfigProvider theme={{ hashed: false }}> 這樣子 antd 有效果,但 antd pro-components 依舊無法支持兼容

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ConfigProvider theme={{ hashed: false }}>
      {/* <StyleProvider
        hashPriority="high"
        transformers={[legacyLogicalPropertiesTransformer]}
      > */}
      <RouterProvider router={router} />
      {/* </StyleProvider> */}
    </ConfigProvider>
  </React.StrictMode>
)

截圖 2023-07-28 下午5 36 31

使用的版本:

    "@ant-design/cssinjs": "^1.16.0",
    "antd": "^5.6.2",
    "@ant-design/pro-components": "2.4.3",
    "@ant-design/icons": "^5.1.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite": "^4.3.9"

想請問有什麼方式能讓 pro-components 和 antd 一樣能支持舊版瀏覽器嗎? 就是不要使用 :where 選擇器QQ

XXuain avatar Jul 28 '23 09:07 XXuain

注意下 "@ant-design/cssinjs": "^1.16.0",

要和antd 里面的一样,不然就会不生效

chenshuai2144 avatar Jul 29 '23 04:07 chenshuai2144

我也遇到了类似的问题,在最新版本的浏览器上显示正常,但在老版本(如83版本的chromium)上显示异常,最后通过参考 https://umijs.org/docs/api/runtime-config#rootcontainerlastrootcontainer-argshttps://ant.design/docs/react/compatible-style-cn 基本解决。

方法就是在src/app.tsx添加下面的函数:

export function rootContainer(container) {
  return (
  <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
    {container}
  </StyleProvider>
);
}

请问一下用了您的方法确实成功了,但是message语句确实失效了,您这边遇到过这种问题吗 message.success 或者error都是不再提示了

lkh-zzz avatar Jan 12 '24 03:01 lkh-zzz

太低版本的浏览器也不提供支持了, 让我们的维护成本太高了

极速浏览器最高也就 78 内核,无力吐槽

image

awesomeWay avatar Jun 26 '24 02:06 awesomeWay