refactor: Table to CSS-IN-JS

[afc163]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

[github-actions]

• 🚨 Please fill changelog in the PR

  • Write with a developer-oriented perspective and narrative method, without describing the details of the repair
  • Describing the problem and the impact on the developer
  • describing the user-first site problem, not your solution
  • Refer: https://ant.design/changelog#4.9.0

• 🚨 请填写 PR 中的 changelog

  • 请用面向开发者的角度和叙述方式撰写，不描述修复细节
  • 描述问题和对开发者的影响
  • 描述用户第一现场的问题，而非你的解决方式
  • 参考：https://ant.design/changelog-cn#4.9.0

[github-actions]

Size Change: -4.36 kB (0%)

Total Size: 889 kB

Filename	Size	Change
./dist/antd-with-locales.min.js	463 kB	+3.67 kB (+1%)
./dist/antd.compact.min.css	4.4 kB	-2.92 kB (-40%)	🎉
./dist/antd.dark.min.css	4.41 kB	-2.95 kB (-40%)	🎉
./dist/antd.min.css	4.4 kB	-2.94 kB (-40%)	🎉
./dist/antd.min.js	409 kB	+3.73 kB (+1%)
./dist/antd.variable.min.css	4.79 kB	-2.95 kB (-38%)	🎉

_{compressed-size-action}

[codecov]

Codecov Report

Merging #35584 (6226151) into next (47493c0) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              next    #35584   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          475       489   +14     
  Lines         8508      8567   +59     
  Branches      2413      2413           
=========================================
+ Hits          8508      8567   +59     

Impacted Files	Coverage Δ
components/_util/theme/util/alias.ts	100.00% <ø> (ø)
...omponents/table/hooks/useFilter/FilterDropdown.tsx	100.00% <ø> (ø)
components/table/Table.tsx	100.00% <100.00%> (ø)
components/table/style/bordered.tsx	100.00% <100.00%> (ø)
components/table/style/ellipsis.tsx	100.00% <100.00%> (ø)
components/table/style/empty.tsx	100.00% <100.00%> (ø)
components/table/style/expand.tsx	100.00% <100.00%> (ø)
components/table/style/filter.tsx	100.00% <100.00%> (ø)
components/table/style/fixed.tsx	100.00% <100.00%> (ø)
components/table/style/pagination.tsx	100.00% <100.00%> (ø)
... and 7 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 47493c0...6226151. Read the comment docs.

[afc163]

还有一个问题，筛选菜单本地和线上样式完全不一样

• http://127.0.0.1:8001/components/table-cn/#components-table-demo-head
• https://preview-35584-ant-design.surge.sh/components/table-cn/#components-table-demo-head

本地	线上

不知道本地表格筛选菜单为啥会被 Menu 的样式污染，然而本地的 Dropdown 演示又没有问题。

[zombieJ]

哎，和 Dropdown 当时遇到的同一个问题：https://github.com/react-component/dropdown/blob/master/src/Dropdown.tsx#L122

rc-dropdown 里 clone 了 element 加属性。Table 这边没有直接包 Menu 所以导致跳过 Menu 样式注入的代码就失效了。

[afc163]

rc-dropdown 里 clone 了 element 加属性。Table 这边没有直接包 Menu 所以导致跳过 Menu 样式注入的代码就失效了。

有啥解法？

[zombieJ]

rc-dropdown 里 clone 了 element 加属性。Table 这边没有直接包 Menu 所以导致跳过 Menu 样式注入的代码就失效了。

有啥解法？

rc-dropdown 里的注入属性拆掉，onClick 部分移至 rc-trigger。其余部分通过 Context 在 antd 侧传递。

[zombieJ]

https://preview-35584-ant-design.surge.sh/components/table-cn/#components-table-demo-head

应该好了

[afc163]

666