🐛[BUG] StyleProvider的container属性不起作用

[taiyangzaitianshang]

🐛 bug 描述

StyleProvider的container属性不起作用，主要是iframe中使用组件的场景样式会丢失的问题

📷 复现步骤

1、使用createInstance创建新的样式实例 2、样式实例的API做一个组件，然后用StyleProvider包裹这个组件，并指定container为document.body

🏞 期望结果

组件对应的style标签被插入到document.body中，但是实际上仍然在head中

💻 复现代码

可复现 demo

© 版本信息

• antd-style 版本: 3.0.0
• 浏览器环境 chrome
• 开发环境 windows

🚑 其他信息

[basala]

遇到了这个问题 +1，用createInstance创建的styleProvider直接包住antd里的组件，样式还是会被加在header里，如果是直接用 @ant-design/cssinjs里的styleProvider可以成功指定container

[arvinxx]

OK，我检查下

[github-actions[bot]]

:tada: This issue has been resolved in version 3.0.1-beta.1 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[arvinxx]

@taiyangzaitianshang 来试试这个版本。

Demo：https://codesandbox.io/s/practical-benz-mhcxse?file=/src/Demo.tsx

[basala]

试了下最新的，在createInstance时指定可以了。但是有一个场景无法满足，组件库里用createInstance暴露出的createStyles定义好了样式，想在不同的业务场景下指定不同的插入位置，能否像@ant-design/cssinjs一样，业务上在组件外部包一层StyleProvider并设置container来实现？

[taiyangzaitianshang]

@arvinxx 感谢修复，但虽然这个版本确实是修复了在createInstance时指定container的场景，styleProvider传container也确实影响了Antd的组件。 但是如果我未在createInstance时指定container。而是在StyleProvider中指定container，这样antd-style做的组件还是没有被影响到。就是问题里贴的demo的那个场景 demo链接

[arvinxx]

@taiyangzaitianshang 的确，这个还是个 edge case，我再看下怎么修复下

[arvinxx]

@taiyangzaitianshang @basala 久等了，再试下 3.1.0-beta.1 ，应该支持好了

[basala]

@arvinxx

非常感谢！本地验证了已经可以正确配置插入位置了，还有一个小问题，类型丢了，看了下node_modules里没有.d.ts文件了

[taiyangzaitianshang]

@taiyangzaitianshang @basala 久等了，再试下 3.1.0-beta.1 ，应该支持好了

歪瑞古德，辛苦了

[basala]

还有一个场景下有问题，同一个组件想在同一个页面的两个不同地方使用，一处是正常引用，style标签插在header中，另一处是在页面中的iframe里去引入这个组件，通过styleProvider来配置插入位置，同时传了cache来放置样式插入的缓存，但是设置的cache貌似不生效，当在header中有样式之后iframe就不会在重复插入了，demo链接： https://codesandbox.io/s/awesome-buck-248nu1?file=/src/Demo.tsx

[arvinxx]

非常感谢！本地验证了已经可以正确配置插入位置了，还有一个小问题，类型丢了，看了下node_modules里没有.d.ts文件了

father 最新版 4.2.0 的版本导致类型丢失了，我先锁了 4.1.9。重新发一个：https://github.com/ant-design/antd-style/pull/48/commits/afd06b3c1eae799adbd779a0c826b0445ed1b5c6

[arvinxx]

还有一个场景下有问题，同一个组件想在同一个页面的两个不同地方使用，一处是正常引用，style标签插在header中，另一处是在页面中的iframe里去引入这个组件，通过styleProvider来配置插入位置，同时传了cache来放置样式插入的缓存，但是设置的cache貌似不生效，当在header中有样式之后iframe就不会在重复插入了，demo链接： https://codesandbox.io/s/awesome-buck-248nu1?file=/src/Demo.tsx

这个感觉可能不太好搞，原因是 emotion 的插入方式是通过判断是否有插入过相应 key 下的 hash来做。如果key和hash一致，就不会再插入了。所以 Provider 上应该要改下相应的key 可能才行。不过我不确定现在的版本支不支持。晚些时候我试验下

[arvinxx]

@basala 3.1.0-beta.3 应该可以了，有空可以试下。

另外需要注意的是，使用上需要用 createStyles 创建样式，不要裸着搭配 cx + css 使用，因为 cx 方法将无法感知 StyleProvider ，拿不到 Context，也就无法自定义插入容器与样式前缀。emotion中也有相关讨论（https://github.com/emotion-js/emotion/issues/2409）

相应的 Demo 示例：https://codesandbox.io/s/compassionate-lehmann-klo7ke

因此如果要保证所有样式都能被 StyleProvider 容器管理到，就不要使用 instance 默认导出的 cx 方法来创建样式，只使用 createStyles 即可。

不过从常规使用来说，如果需要消费和使用 antd 的 token 和自定义 token 、主题相关的能力，应该默认都会使用 createStyles 来获得动态性。

[taiyangzaitianshang]

@basala 试下 3.1.0-beta.3 应该可以了，有空可以试下。

另外需要注意的是，使用上需要用 createStyles 创建样式，不要裸着搭配 cx + css 使用，因为 cx 方法将无法感知 StyleProvider ，拿不到 Context，也就无法自定义插入容器与样式前缀。emotion中也有相关讨论（https://github.com/emotion-js/emotion/issues/2409）

因此如果要保证所有样式都能被 StyleProvider 容器管理到，就不要使用 instance 默认导出的 cx 方法来创建样式，只使用 createStyles 即可。

不过从常规使用来说，如果需要消费和使用 antd 的 token 和自定义 token 、主题相关的能力，应该默认都会使用 createStyles 来获得动态性。

Demo：https://codesandbox.io/s/compassionate-lehmann-klo7ke

确实，按照文档做的话，应该都是用的createStyles，不会去用cx

[basala]

@basala 3.1.0-beta.3 应该可以了，有空可以试下。

另外需要注意的是，使用上需要用 createStyles 创建样式，不要裸着搭配 cx + css 使用，因为 cx 方法将无法感知 StyleProvider ，拿不到 Context，也就无法自定义插入容器与样式前缀。emotion中也有相关讨论（https://github.com/emotion-js/emotion/issues/2409）

相应的 Demo 示例：https://codesandbox.io/s/compassionate-lehmann-klo7ke

因此如果要保证所有样式都能被 StyleProvider 容器管理到，就不要使用 instance 默认导出的 cx 方法来创建样式，只使用 createStyles 即可。

不过从常规使用来说，如果需要消费和使用 antd 的 token 和自定义 token 、主题相关的能力，应该默认都会使用 createStyles 来获得动态性。

非常感谢！！！本地验证后可以实现了，感谢大佬👍👍👍

[github-actions[bot]]

:tada: This issue has been resolved in version 3.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: