use style tag

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

@@ -1,4 +1,12 @@
+import { css } from '../../utils/css'
+
 export function DevToolsPanel() {
   // TODO: Remove style; It is to indicate faster in the browser.
-  return <div className="text-black">DevToolsPanel</div>
+  return <div data-nextjs-devtools-panel>DevToolsPanel</div>
 }
+
+export const DEVTOOLS_PANEL_STYLES = css`
+  [data-nextjs-devtools-panel] {
+    color: black;
+  }
+`

packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx

@@ -25,6 +25,7 @@ import { DEV_TOOLS_INFO_RENDER_FILES_STYLES } from '../components/overview/segme
 import { FADER_STYLES } from '../components/fader'
 import { RESTART_SERVER_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/restart-server-button'
 import { NEXT_LOGO_STYLES } from '../components/devtools-indicator/next-logo'
+import { DEVTOOLS_PANEL_STYLES } from '../components/devtools-panel/devtools-panel'
 
 export function ComponentStyles() {
   return (
@@ -56,6 +57,7 @@ export function ComponentStyles() {
         ${DEV_TOOLS_INFO_RENDER_FILES_STYLES}
         ${FADER_STYLES}
         ${NEXT_LOGO_STYLES}
+        ${DEVTOOLS_PANEL_STYLES}
       `}
     </style>
   )