Started using styled-components in r3f

packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx

@@ -2,6 +2,7 @@ import type {ReactElement, ReactNode} from 'react'
 import React from 'react'
 import type {IconType} from 'react-icons'
 import {Group, Button} from 'reakit'
+import styled from 'styled-components'
 import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
 
 interface OptionButtonProps<Option> {
@@ -12,6 +13,8 @@ interface OptionButtonProps<Option> {
   onClick: () => void
 }
 
+// const Ro = styled(TooltipReference)``
+
 function OptionButton<Option>({
   value,
   option,
@@ -51,16 +54,17 @@ interface CompactModeSelectProps<Option> {
   settingsPanel?: ReactNode
 }
 
+const Container = styled(Group)`
+  display: flex;
+`
+
 const CompactModeSelect = <Option extends string | number>({
   value,
   onChange,
   options,
 }: CompactModeSelectProps<Option>) => {
   return (
-    <Group
-      // @ts-ignore
-      className="flex"
-    >
+    <Container>
       {options.map(({label, icon, option}) => (
         <OptionButton
           key={option}
@@ -71,7 +75,7 @@ const CompactModeSelect = <Option extends string | number>({
           onClick={() => onChange(option)}
         />
       ))}
-    </Group>
+    </Container>
   )
 }