How to pass redux props to styled component in react typescript

Question

i'm pretty new to typescript and there's something that is not very clear to me. I'm trying to pass a prop to styled-component file, the prop arrive from redux using a selector, but seems that is not working and i'm not able to log values in styled component cause to wrong syntax. Here's my code so far:

type ButtonProps = {
  title: string
  reducerName: string
  flowName: string
  actionType: string
  disabled: boolean
  route?: string
  customAction?: string
  id?: number
  active?: string
  isActiveBtn?: any
  isActive?: string
  onClick: () => void
} & StyledButtonProps

const MyButton: React.FC<ButtonProps> = ({
  id,
  title,
  customAction,
  actionType,
  reducerName,
  flowName,
  route,
  ...rest
}) => {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const isActive = useSelector(selectType)
  const [active, setActive] = useState('')

  const onClick = useCallback(() => {
    setActive(title)
    dispatch(
      createAction<ButtonActionPayload>(customAction || actionType)({
        id,
        title,
        flowName,
        reducerName
      })
    )
    route && navigate(`${route}`)
  }, [
    dispatch,
    customAction,
    actionType,
    title,
    reducerName,
    flowName,
    route,
    navigate,
    id
  ])
  return (
    <StyledButton isActiveBtn={isActive} {...rest} onClick={onClick}>
      {title}
    </StyledButton>
  )
}
export default MyButton

and here the styled component:

import { Button } from 'antd'
import styled from 'styled-components'
import styledMap from 'styled-map'

export type StyledButtonProps = {
  borderColor: string
  borderType: string
  buttonColor: string
  buttonBgColor: string
  margin: string
  paddingRight: string
  paddingLeft: string
  variant: string
  isActive?: string
}

export const StyledButton = styled(Button)<StyledButtonProps>`
  background-color: ${(props) =>
    props.isActive === props.title ? 'green ' : buttonBgColor};
`

What am i doing wrong here passing the isActive prop? and why i can't do this:

background-color: ${(props) => console.log(props)};

Thanks in advance for any tips

Answer 1

As far as I can tell, props are getting passed through without issue. I do see some discrepancies though.

Issues

• An isActiveBtn prop is passed, but an isActive prop is referenced in the function.

• The isActive color has a typo, a trailing space "green ".

• No title prop is passed to the StyledButton component, so props.title is undefined in function.

  export const StyledButton = styled(Button)<StyledButtonProps>`
    background-color: ${(props) =>
      props.isActive === props.title
        ? 'green '
        : buttonBgColor
    };
  `;
  

  ...

  <StyledButton
    isActiveBtn={isActive}
    {...rest}
    onClick={onClick}
  >
    {title}
  </StyledButton>
  

Solution

Pass both an isActive and title prop to the styled button and fix the color string value.

const StyledButton = styled(Button)<StyledButtonProps>`
  background-color: ${(props: any) => {
    console.log({ props });
    return props.isActive === props.title ? "green" : buttonBgColor;
  }};
`;

...

<StyledButton isActive={isActive} onClick={onClick} title={title}>
  {title}
</StyledButton>