How to use the @edtr-io/ui.styled function in @edtr-io/ui

import { styled } from '@edtr-io/ui'
// @ts-ignore
import IframeResizer from 'iframe-resizer-react'
import * as React from 'react'

const Iframe = styled(IframeResizer)({
  width: '100%',
  border: '1px solid #ddd',
  borderRadius: '2px'
})

export const SerloInjectionRenderer = (props: { src: string }) => {
  return (
    <div>
      </div>

const Textarea = styled(TextareaAutosize)({
  minHeight: '100px',
  width: '100%',
  margin: 'auto',
  padding: '10px',
  resize: 'none',
  fontFamily: 'Menlo, Monaco, "Courier New", monospace',
  border: 'none',
  outline: 'none',
  boxShadow: '0 1px 1px 0 rgba(0,0,0,0.50)',
  '&::-webkit-input-placeholder': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const StyledIgnoreKeys = styled(IgnoreKeys)({
  width: '100%'
})

const EditorTextareaRefForward: React.RefForwardingComponent<
  HTMLTextAreaElement,
  Omit
> = (props, ref) => {
  return (
    
      <textarea> {
          if (e.key !== 'ArrowUp' &amp;&amp; e.key !== 'ArrowDown') {
            return
          }</textarea>

justifyContent: 'flex-start',
    margin: '15px',
    width: '175px',
    borderRadius: '5px',
    padding: '15px',
    cursor: 'pointer',
    transition: '250ms all ease-in-out',
    color: theme.menu.primary.color,

    '&:hover': {
      backgroundColor: theme.menu.secondary.backgroundColor
    }
  }
})

const DefaultIcon = styled(EdtrIcon)({
  height: '100%',
  width: '100%'
})

const IconWrapper = styled.div({
  height: '50px'
})

const Title = styled.h3({
  marginTop: '15px',
  fontSize: '24px',
  marginBottom: '10px',
  fontWeight: 'bold',
  textAlign: 'center'
})

icon: IconProp
  disabled?: boolean
}> = props => (
  
    
  
)

export const Add: React.FunctionComponent<{
  onClick: () => void
}> = props => 

export const TopFloatingButtonContainer = styled(FloatingButtonContainer)({
  top: '-12px',
  width: '20px',
  left: '50%'
})

const BottomFloatingButtonContainer = styled(FloatingButtonContainer)({
  bottom: '10px',
  width: '20px',
  left: '50%',
  zIndex: 90
})

const RightFloatingButtonContainer = styled(FloatingButtonContainer)({
  top: '-12px',
  right: 0,
  width: 'auto',

}
  }
)

const TriggerArea = styled.div({
  width: '100%',
  padding: '2px 0 4px',
  display: 'flex',
  justifyContent: 'center',

  '&:hover .add-trigger': {
    opacity: 0.6
  }
})

const Icon = styled(EdtrIcon)({
  width: '26px'
})

export function Add(props: {
  config: RowsConfig
  focused: boolean
  onClick: () => void
}) {
  return (

cursor: 'grab',
  userSelect: 'none',
  '&:active': {
    cursor: 'grabbing'
  }
})

const ButtonContainer = styled.div({
  display: 'flex'
})

const Left = styled.div({
  flex: 1
})

const BorderlessOverlayButton = styled(OverlayButton)({
  border: 'none !important',
  padding: '0 !important',
  minWidth: '0 !important'
})

export function RowRenderer({
  insert,
  moveRow,
  row,
  rows,
  index,
  plugins
}: {
  insert(index: number, options?: { plugin: string; state?: unknown }): void
  moveRow(from: number, to: number): void
  row: StateTypeReturnType[0]

DragObjectWithType,
  DropTargetMonitor,
  useDrag,
  useDrop
} from 'react-dnd'
import { NativeTypes } from 'react-dnd-html5-backend'

import { RowsState } from '..'

interface RowDragObject extends DragObjectWithType {
  type: 'row'
  id: string
  index: number
}

const DragToolbarButton = styled(PluginToolbarButton)({
  marginBottom: '5px',
  marginTop: '-3px',
  cursor: 'grab',
  userSelect: 'none',
  '&:active': {
    cursor: 'grabbing'
  }
})

const ButtonContainer = styled.div({
  display: 'flex'
})

const Left = styled.div({
  flex: 1
})

const Textarea = styled(TextareaAutosize)({
  minHeight: '100px',
  width: '100%',
  margin: 'auto',
  padding: '10px',
  resize: 'none',
  fontFamily: 'Menlo, Monaco, "Courier New", monospace',
  border: 'none',
  outline: 'none',
  boxShadow: '0 1px 1px 0 rgba(0,0,0,0.50)',
  '&::-webkit-input-placeholder': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const StyledIgnoreKeys = styled(IgnoreKeys)({
  width: '100%'
})

const EditorTextareaRefForward: React.RefForwardingComponent<
  HTMLTextAreaElement,
  Omit
> = (props, ref) => {
  return (
    
      <textarea> {
          if (e.key !== 'ArrowUp' &amp;&amp; e.key !== 'ArrowDown') {
            return
          }</textarea>

borderTop: '1px solid #c6cbd1'
  },
  '& th, & td': {
    padding: '6px 13px',
    border: '1px 1px solid #dfe2e5'
  },
  '& table tr:nth-child(2n)': {
    background: '#f6f8fa'
  },
  '& table': {
    width: '100%',
    maxWidth: '100%'
  }
})

const StyledIcon = styled(Icon)({ marginRight: '5px' })

export function createTableRenderer(config: TablePluginConfig) {
  return function TableRenderer(props: PluginEditorProps) {
    const { editable, state } = props

    const renderedMarkdown = config.renderMarkdown(state.value)

    return (
      
        {editable && state.value.trim() === '' ? (
          
        ) : null}
        {typeof renderedMarkdown === 'string' ? (

borderRadius: 0,
  opacity: 0.15,
  '&:hover': {
    cursor: 'pointer',
    opacity: 1
  },
  display: 'inline-block'
})

const FloatingButtonContainer = styled.div({
  position: 'absolute',
  height: '0',
  textAlign: 'center'
})

const TopFloatingButtonContainer = styled(FloatingButtonContainer)({
  top: '0',
  width: '20px',
  left: '50%'
})

const BottomFloatingButtonContainer = styled(FloatingButtonContainer)({
  bottom: '10px',
  width: '20px',
  left: '50%',
  zIndex: 90
})

const RightFloatingButtonContainer = styled(FloatingButtonContainer)({
  top: '-10px',
  right: 0,
  width: 'auto',