Использование Chroma Luminance с Styled-компонентами

Question

Я использую Chroma.js для динамического изменения цвета текста в зависимости от фона div.Стилизация выполняется с помощью стилевых компонентов, и я не могу правильно настроить яркость, чтобы светлый текст появлялся на темном фоне.

const DraggableColorBox = SortableElement(props => {
  const { color, name, handleDelete } = props
  return (
    <DraggableWrapper
      style={{ backgroundColor: color }}
    >
      <BoxContent color={color}>
        <span>{name}</span>
        <DeleteOutlinedIcon onClick={handleDelete} />
      </BoxContent>
    </DraggableWrapper>
  )
})

export default DraggableColorBox;

Вот стили для указанного компонента

export const BoxContent = styled.div`
     color: ${props => chroma(props.color).luminance() <= 0.8
       ? 'rgba(255, 255, 255, 0.8)'
       : 'rgba(0, 0, 0, 0.6)'};
   `

Я получаю сообщение об ошибке «Объект (...) не является функцией».

Iтакже попытался стилизовать его с помощью следующего:

${({ color }) => color && css`
      color: ${chroma(color).luminance() <= 0.8
      ? 'rgba(255, 255, 255, 0.8)'
      : 'rgba(0, 0, 0, 0.6)'}
  `}

Это не сработало.Я либо не понимаю, как работают стилевые компоненты, либо мне что-то не хватает.