Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

191
Views
How to pass redux props to styled component in react typescript

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

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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>

Edit how-to-pass-redux-props-to-styled-component-in-react-typescript

enter image description here

about 4 years ago · Santiago Trujillo Report

0

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};
`
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!