Interpolation inside interpolation?

[andre-freitas]

I think this does not work because I have an interpolation inside an interpolation:

const StyledComponent = styled(({ component, ...props }) => React.cloneElement(component, props))`
  color: ${(props) => (props.color ? "gray100" : "gray100")};
`

This works:

const StyledComponent = styled(({ component, ...props }) => React.cloneElement(component, props))`
  color: gray100;
`

This is the complete component:

import { CloseOutlined, MenuOutlined } from "@ant-design/icons"
import styled from "@xstyled/styled-components"
import React from "react"
import { ColorType } from "../../themes/theme"

const Icons = {
  menu: MenuOutlined,
  close: CloseOutlined,
}

type IconType = keyof typeof Icons

type IconProps = {
  type: IconType
  color?: ColorType
}

const StyledComponent = styled(({ component, ...props }) => React.cloneElement(component, props))`
  color: ${(props) => (props.color ? "gray100" : "gray100")};
`

const Icon = ({ type, color }: IconProps) => {
  const Component = Icons[type]

  return (
    <StyledComponent component={<Component />} color={color} />
  )
}

export { Icon }
export type { IconProps, IconType }

Tips?

[gregberge]

Hi @andre-freitas, your styled components must be statical, in your example they are not, that's why it does not work.

You could do something like:

<x.div as={Component} color={color} />