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

const Textarea = styled.textarea({
  height: '250px',
  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 QuestionIcon = styled(Icon)({
  color: 'black',
  margin: '0 10px -3px 5px',
  '&:hover': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const CheckboxContainer = styled.div({
  float: 'right'
})

// TODO: type and theming. maybe put in editor-ui?
const HelpIcon: React.FunctionComponent = () => (

import { styled, faCloudUploadAlt, Icon } from '@edtr-io/editor-ui'
import { ThemeProps } from '@edtr-io/ui'
import * as React from 'react'

import { createRowPluginTheme } from '../..'

const StyledIcon = styled(Icon)({
  height: '48px',
  marginBottom: '15px',
  transition: '250ms all ease-in-out'
})

const StyledDropzone = styled.div(
  ({ name, ...props }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      width: '100%',
      marginTop: '50px',
      backgroundColor: theme.menu.dropzone.backgroundColor,
      color: theme.menu.dropzone.color,
      border: `3px dashed ${theme.color}`,
      transition: '250ms all ease-in-out',
      borderRadius: '5px',

import { StatefulPluginEditorProps } from '@edtr-io/core'
import { Icon, faLink, EditorInput, styled } from '@edtr-io/editor-ui'
import * as React from 'react'

import { AnchorRenderer } from './renderer'
import { anchorState } from '.'

const StyledIcon = styled(Icon)({ marginRight: '5px' })
export const AnchorEditor = (
  props: StatefulPluginEditorProps
) => {
  const { editable, focused, state } = props
  return (
    
      {editable ?  : null}
      
      {focused ? (
         {
            state.set(e.target.value)
          }}
        />

switchControls={setVisibleControls}
          onChange={onChange}
        />
      )
    case VisibleControls.Colors:
      return (
        
      )
  }
}

const TimeoutBottomToolbar = styled(BottomToolbar)<{
  visible: boolean
  isTouch: boolean
}>(props => {
  const touchStyles = props.isTouch
    ? { bottom: 'unset', top: 0, transform: 'translate(-50%, 50%)' }
    : {}

  return {
    opacity: props.visible ? 1 : 0,
    transition: '500ms opacity ease-in-out',
    ...touchStyles
  }
})

let debounceTimeout: number
export function Controls(props: ControlProps) {

import { StatefulPluginEditorProps } from '@edtr-io/core'
import { ThemeProvider } from '@edtr-io/ui'
import { ExpandableBox } from '@edtr-io/renderer-ui'
import * as React from 'react'

import { solutionState } from '.'
import { EditorInput, styled } from '@edtr-io/editor-ui'

const EditorInputWithMarginLeft = styled(EditorInput)({
  marginLeft: '5px',
  paddingLeft: '3px',
  '&:focus': {
    borderColor: 'black'
  }
})
export function SolutionEditor({
  state,
  editable,
  focused
}: StatefulPluginEditorProps) {
  const title = (
    
      Lösung
      {editable && focused ? (

import { StatefulPluginEditorProps } from '@edtr-io/core'
import { ThemeProvider } from '@edtr-io/ui'
import { ExpandableBox } from '@edtr-io/renderer-ui'
import * as React from 'react'

import { hintState } from '.'
import { EditorInput, styled } from '@edtr-io/editor-ui'

const EditorInputWithMarginLeft = styled(EditorInput)({
  marginLeft: '5px',
  paddingLeft: '3px',
  '&:focus': {
    borderColor: 'black'
  }
})

export function HintEditor({
  state,
  editable,
  focused
}: StatefulPluginEditorProps) {
  const title = (
    
      Hinweis
      {editable && focused ? (

({ disabled, name, ...props }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      height: '24px',
      marginBottom: '15px',
      cursor: disabled ? 'not-allowed' : 'pointer',
      color: disabled ? theme.menu.secondary.color : theme.menu.primary.color,
      pointerEvents: disabled ? 'none' : undefined,
      '&:hover': {
        color: disabled ? theme.menu.secondary.color : theme.menu.highlightColor
      }
    }
  }
)

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

const Drag: React.FunctionComponent<
  IconProps & { connectDragSource: Function }
> = ({ rows, connectDragSource, name }) => {
  return connectDragSource(
    <div>
      </div>