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

zIndex: 100,
    backgroundColor: theme.backgroundColor,
    color: theme.color,
    left: '8%',
    right: '8%'
  }
})

const OverlaySettingsBox = styled(OverlayBox)({
  minHeight: '60%',
  paddingBottom: '10px',
  maxWidth: '1150px',
  top: '20%'
})

const CloseButton = styled.button(props => {
  const theme = createOverlayTheme(props.theme)

  return {
    float: 'right',
    position: 'relative',
    color: theme.color,
    fontSize: 16,
    zIndex: 98,
    outline: 'none',
    border: 'none',
    backgroundColor: 'transparent',
    paddingTop: '5px',
    '&:hover': {
      color: theme.highlightColor
    }
  }

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',
    '&:hover': {
      color: props.theme.highlightColor,
      borderColor: props.theme.highlightColor
    }
  }
})

exerciseState: ExerciseState
) => {
  switch (exerciseState) {
    case ExerciseState.Default: {
      return theme.backgroundColor
    }
    case ExerciseState.SolvedRight: {
      return theme.correctBackgroundColor
    }
    case ExerciseState.SolvedWrong: {
      return theme.wrongBackgroundColor
    }
  }
}

const SubmitButtonComponent = styled.button<
  { exerciseState: ExerciseState } & RendererThemeProps
>(({ exerciseState, ...props }) => {
  const theme = createSubmitButtonTheme('submitButton', props.theme)

  return {
    float: 'right',
    margin: '10px 0px',
    border: 'none',
    padding: '3px',
    backgroundColor: getBackgroundColor(theme, exerciseState),
    color: theme.color,
    transition: 'background-color .5s ease',
    outline: 'none',
    '&hover': {
      backgroundColor: theme.hoverBackgroundColor
    }

import { createOverlayTheme } from '.'

export const createOverlayButtonTheme = createEditorUiTheme(
  theme => {
    return {
      backgroundColor: 'transparent',
      color: theme.color,
      borderColor: theme.color,
      hoverBackgroundColor: 'transparent',
      hoverColor: theme.primary.background,
      hoverBorderColor: theme.primary.background
    }
  }
)

export const Button = styled.button((props: EditorThemeProps) => {
  const theme = createOverlayTheme(props.theme)

  return {
    margin: '3px',
    backgroundColor: theme.button.backgroundColor,
    outline: 'none',
    border: `2px solid ${theme.button.borderColor}`,
    color: theme.button.color,
    padding: '10px',
    borderRadius: '4px',
    minWidth: '125px',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: theme.button.hoverBackgroundColor,
      color: theme.button.hoverColor,
      borderColor: theme.button.hoverBorderColor

}

const AnswerContainer = styled.div({
  marginBottom: '10px',
  display: 'flex',
  alignItems: 'center'
})

const CheckboxContainer = styled.div({
  width: '10%',
  textAlign: 'center',
  marginRight: '10px',
  fontWeight: 'bold'
})

const RemoveButton = styled.button({
  borderRadius: '50%',
  outline: 'none',
  background: 'white',
  zIndex: 20,
  float: 'right',
  transform: 'translate(50%, -40%)',
  '&:hover': {
    border: '3px solid #007ec1',
    color: '#007ec1'
  }
})

const FeedbackField = styled.div({
  paddingLeft: '20px',
  paddingBottom: '10px',
  paddingTop: '10px',

position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    backgroundColor: props.blur ? 'rgba(255,255,255,0.8)' : undefined,
    zIndex: 10
  }
})

const ButtonWrapper = styled.div({
  width: '100%',
  height: '100%',
  textAlign: 'center',
  display: 'flex'
})
const ActivateButton = styled.button({
  pointerEvents: 'all',
  color: 'white',
  border: 'none',
  borderRadius: '5px',
  padding: '2px 10px',
  textAlign: 'center',
  outline: 'none',
  backgroundColor: 'rgb(0,126,193)',
  zIndex: 10,
  margin: 'auto'
})
export const PreviewOverlay: React.FunctionComponent = props => {
  const [active, setActiveState] = React.useState(false)
  const { scope } = React.useContext(ScopeContext)

  const setActive = React.useCallback(

import { styled, useEditorTheme } from '@edtr-io/ui'
import * as R from 'ramda'
import * as React from 'react'
import { Range, Editor as SlateEditor } from 'slate'
import { ReactEditor } from 'slate-react'

import { useEditor } from '../helpers'
import { Editor, TextEditorPlugin } from '../types'

const Button = styled.button<{
  active?: boolean
  config: HoveringToolbarConfig
}>(({ active, config }) => {
  const { theme } = config
  return {
    backgroundColor: active
      ? theme.active.backgroundColor
      : theme.backgroundColor,
    cursor: 'pointer',
    boxShadow: active ? 'inset 0 1px 3px 0 rgba(0,0,0,0.50)' : undefined,
    color: active ? theme.active.color : theme.color,
    outline: 'none',
    height: '25px',
    border: 'none',
    borderRadius: '4px',
    margin: '5px',

exerciseState: ExerciseState
) => {
  switch (exerciseState) {
    case ExerciseState.Default: {
      return theme.backgroundColor
    }
    case ExerciseState.SolvedRight: {
      return theme.correctBackgroundColor
    }
    case ExerciseState.SolvedWrong: {
      return theme.wrongBackgroundColor
    }
  }
}

const SubmitButtonComponent = styled.button<
  { exerciseState: ExerciseState } & RendererThemeProps
>(({ exerciseState, ...props }) => {
  const theme = createSubmitButtonTheme('submitButton', props.theme)

  return {
    float: 'right',
    margin: '10px 0px',
    border: 'none',
    padding: '3px',
    backgroundColor: getBackgroundColor(theme, exerciseState),
    color: theme.color,
    transition: 'background-color .5s ease',
    outline: 'none',
    '&hover': {
      backgroundColor: theme.hoverBackgroundColor
    }

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

import { Icon, faTimes, faPlus } from './icon'

export const AddButtonComponent = styled.button({
  marginLeft: 'calc(10% + 20px)',
  width: 'calc(90% - 20px)',
  borderRadius: '10px',
  backgroundColor: 'white',
  textAlign: 'left',
  color: 'lightgrey',
  minHeight: '50px',
  border: '2px solid lightgrey',
  outline: 'none',
  '&:hover': { border: '3px solid #007ec1', color: '#007ec1' }
})

export function AddButton(props: { onClick: () => void; children: string }) {
  return (
    
       {props.children}

} from '@edtr-io/ui'

export const createEditorButtonTheme = createEditorUiTheme(
  theme => {
    return {
      backgroundColor: theme.backgroundColor,
      color: theme.color,
      borderColor: theme.color,
      hoverBackgroundColor: 'rgba(0,0,0,0.50)',
      hoverColor: theme.primary.background,
      hoverBorderColor: theme.primary.background
    }
  }
)

export const EditorButton = styled.button((props: EditorThemeProps) => {
  const theme = createEditorButtonTheme('button', props.theme)

  return {
    margin: '3px',
    backgroundColor: theme.backgroundColor,
    outline: 'none',
    border: 'none',
    boxShadow: '0 1px 2px 0 rgba(0,0,0,0.50)',
    color: theme.color,
    borderRadius: '4px',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: theme.hoverBackgroundColor,
      color: theme.hoverColor,
      borderColor: theme.hoverBorderColor
    }