elastic/kibana

[Detection Engine] EUI Chore - Remove usage of styled-components

Open

#211,119 建立於 2025年2月13日

在 GitHub 查看
 (5 留言) (0 反應) (0 負責人)TypeScript (19,065 star) (8,021 fork)batch import
EUI Visual RefreshTeam: SecuritySolutionTeam:Detection Engineeffort:lowgood first issuevalue:high

描述

Summary

As part of the recent EUI Refresh, many instances of our usage of styled-components were removed necessarily as they referenced either outdated or static EUI theme variables. However, there are still several (65, at the time of creating this issue) uses of styled-components that need to be updated.

Why?

The motivation is described well here. Essentially, we are moving toward @emotion for its ability to aggregate styles from multiple component levels, and we cannot use both styled-components and @emotion in the same file.

貢獻者指南

技術棧
typescriptreact
領域
frontend
議題類型
refactor
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-2 days
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
mostly clear
前置要求
ReactTypeScriptStyled components
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
50
研究方向
Identify all files in the Detection Engine plugin that use styled components. The issue mentions 65 instances, likely under x pack/plugins/security solution/public/detections/. For each, replace with @emotion's css prop or styled API following EUI migration patterns. Ensure styles render correctly and no regressions. Consult EUI migration guide and existing examples in Kibana.