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

padding: '5px 0 10px',
      opacity: focused ? 0.6 : 0,
      transition: '250ms all ease-in-out 250ms',
      // position: inline ? 'absolute' : 'relative',
      zIndex: 70,

      '&:hover': {
        color: theme.highlightColor,
        opacity: 1,
        cursor: 'pointer'
      }
    }
  }
)

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

const StyledResizable = styled(Resizable)({
  padding: '5px',
  position: 'relative'
})

const Clear = styled.div({
  clear: 'both'
})

const Container = styled.div<{ hasFocus: boolean }>(props => {
  return {
    border: props.hasFocus ? '2px solid #ccc' : ''
  }
})

const InlineOptionsWrapper = styled.div({
  position: 'absolute',
  top: '-30px',
  right: '0',
  padding: '30px',
  zIndex: 95,
  whiteSpace: 'nowrap'
})

const InlineOptionsContentWrapper = styled.div({
  boxShadow: '0 2px 4px 0 rgba(0,0,0,0.50)',
  backgroundColor: 'rgba(255, 255, 255, 0.95)',
  borderRadius: '4px'
})

function InlineOptions(props: React.PropsWithChildren<{}>) {
  return (

{}}
          />
        
        
          {children}
        
      
    )
  }
  private Container = styled.div<{ isCorrect: boolean; showFeedback: boolean }>(
    props => {
      return {
        paddingLeft: '20 px',
        color: props.showFeedback
          ? props.isCorrect
            ? '#95bc1a'
            : '#f7b07c'
          : 'black'
      }
    }
  )
}

export interface ChoiceRendererProps {
  index: number
  onClick?: (event: React.MouseEvent<element>) =&gt; void</element>

display: 'inline-block'
  })
)

const AddMenuContainer = styled(OverlayBox)({
  padding: '20px',
  maxWidth: '400px'
})

const AddMenu = styled.div({
  display: 'flex',
  flexFlow: 'row wrap',
  justifyContent: 'space-around'
})

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

export const IconButton: React.FunctionComponent<{
  onClick: () => void
  icon: IconProp
  disabled?: boolean
}> = props => (

import {
  Editor,
  EditorContext,
  getClipboard,
  PluginState,
  getPlugins
} from '@edtr-io/core'
import { styled } from '@edtr-io/ui'

const ClipboardHeader = styled.div({
  fontSize: '130%',
  textAlign: 'center',
  marginBottom: '10px'
})

const Container = styled.div({
  textAlign: 'center'
})

const ButtonContainer = styled.div({
  marginTop: '10px',
  display: 'flex',
  flexFlow: 'row wrap',
  justifyContent: 'space-evenly'
})

const Preview = styled.div({
  display: 'flex',
  width: '80px',
  height: '45px',
  overflow: 'hidden',
  border: '1px solid black',

margin: '0 auto',
    position: 'absolute',
    backgroundColor: props.theme.backgroundColor,
    color: props.theme.textColor,
    padding: '20px',
    left: '8%',
    right: '8%',
    maxWidth: '400px',
    zIndex: 100
  }
})
AddMenuContainer.defaultProps = {
  theme: defaultTheming
}

const AddMenu = styled.div({
  display: 'flex',
  flexFlow: 'row wrap',
  justifyContent: 'space-around'
})

const AddMenuButton = styled.button((props: ThemeProps) => {
  return {
    margin: '3px',
    backgroundColor: props.theme.buttonBackgroundColor,
    outline: 'none',
    border: `2px solid ${props.theme.textColor}`,
    color: props.theme.textColor,
    padding: '10px',
    borderRadius: '4px',
    minWidth: '125px',
    cursor: 'pointer',

})

const Preview = styled.div({
  display: 'flex',
  width: '80px',
  height: '45px',
  overflow: 'hidden',
  border: '1px solid black',
  margin: '0 5px'
})

const Button = styled.div({
  cursor: 'pointer'
})

const PreventMouseEvents = styled.div({
  pointerEvents: 'none'
})

export const Clipboard: React.FunctionComponent<{
  onClose: (pluginState: PluginState) => void
}> = props => {
  const store = React.useContext(EditorContext)
  const states = getClipboard(store.state)
  return (
    
       Zwischenablage 
      
        {states.length ? (
          states.map((state, index) => {
            return (
              <button> props.onClose(state)}&gt;</button>

)
  }

  private BoxFreeContainer = styled.div<{
    correct?: boolean
    showOnLeft?: boolean
  }>(({ correct, showOnLeft }) => {
    return {
      color: correct ? '#95bc1a' : '#f7b07c',
      fontWeight: 'bold',
      textAlign: showOnLeft ? 'left' : 'right'
    }
  })

  private BoxContainer = styled.div<{ correct?: boolean }>({
    backgroundColor: '#fcf8e3',
    borderColor: '#faebcc',
    color: '#8a6d3b',
    padding: '15px'
  })
}

export interface FeedbackProps {
  boxFree?: boolean
  isTrueAnswer?: boolean
  showOnLeft?: boolean
}

backgroundColor: theme.backgroundColor,
      color: theme.color,
      overlayBackgroundColor: '#00000033',
      highlightColor: theme.primary.background,
      button: createOverlayButtonTheme('button', themeProp),
      input: createOverlayInputTheme('input', themeProp),
      textarea: createOverlayTextareaTheme('textarea', themeProp),
      checkbox: createOverlayCheckboxTheme('checkbox', themeProp),
      select: createOverlaySelectTheme('select', themeProp)
    }
  })

  return themeCreator('overlay', themeProp)
}

const OverlayWrapper = styled.div(props => {
  const theme = createOverlayTheme(props.theme)

  return {
    width: '100%',
    height: '100%',
    position: 'fixed',

    top: 0,
    left: 0,
    overlayBackgroundColor: theme.overlayBackgroundColor,
    zIndex: 99
  }
})

export const OverlayBox = styled.div(props => {
  const theme = createOverlayTheme(props.theme)

import { styled } from '@edtr-io/ui'
import * as React from 'react'

const OverlayTriangle = styled.div<{ positionAbove: boolean }>(props => {
  const borderPosition = props.positionAbove ? 'borderTop' : 'borderBottom'
  return {
    position: 'relative',
    width: 0,
    height: 0,
    borderLeft: '5px solid transparent',
    borderRight: '5px solid transparent',
    [borderPosition]: '10px solid rgba(51,51,51,0.95)'
  }
})

const InlineOverlayWrapper = styled.div({
  position: 'absolute',
  top: '-10000px',
  left: '-10000px',
  opacity: 0,
  transition: 'opacity 0.5s',
  zIndex: 95,
  whiteSpace: 'nowrap'
})

const InlineOverlayContentWrapper = styled.div({
  boxShadow: '0 2px 4px 0 rgba(0,0,0,0.50)',
  backgroundColor: 'rgba(51,51,51,0.95)',
  color: '#ffffff',
  borderRadius: '4px',
  '& a': {
    color: '#ffffff',