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

CodePudding user response：

Change the props name isActiveBtn={isActive} to isActive={isActive}
or
if you want the props name as isActiveBtn, fix all the styled component isActive value to isActiveBtn.

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
  isActiveBtn?: string
}

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

CodePudding user response：

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>