Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

192
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda