Summary

There is a plan to migrate from styled-components to emotion, and this ticket focuses on styled-components usages for obs-ux-management related plugins and related information for this migration. This migration helps to avoid issues related to sharing components with platform plugins, as they have already started this migration. (Avoiding issues such as #186969)

Here is a comment from EUI team about this migration.

Here are hooks that can be used instead of styled-components ThemeContext: (comment)

• useEuiTheme() (https://eui.elastic.co/#/theming/theme-provider#consuming-with-the-react-hook)

  const { euiTheme } = useEuiTheme();
  <div
    css={css`
      background: ${euiTheme.colors.lightShade};
      padding: calc(${euiTheme.size.base} * 2);
    `}
  />
  

• Or, you can use Emotion's built-in theming: https://eui.elastic.co/#/theming/theme-provider#consuming-with-emotions-theming

  <div
    css={({ euiTheme }) => css`
      background-color: ${euiTheme.colors.lightestShade};
      padding: ${euiTheme.size.l};
    `}
  />
  

Here are some PRs that tried to migrate some components :

• [OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management  #186970
• [Custom threshold/Metric threshold] Use emotion instead of styled component for auto suggestion #186422