React does not recognize the `isActive` prop on a DOM element - styled-components

user_4756106 0
Viewed 2537

I have the following svg component where I am passing props.

import React from 'react';
export default (props) => (
  <svg {...props}>
    <path
      d="M11.5 16.45l6.364-6.364"
      fillRule="evenodd"
    />
  </svg>
);

I then have a styled-component that looks like this. 

const Icon = styled(_Icon)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`;

I am seeing the following react error.

Warning: React does not recognize the isActive prop on a DOM element.

styled-components reactjs ecmascript-6 css javascript
5 Answers
const StyledIcon = styled(({ isActive, ...props }) => <Icon {...props} />)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`

Is the much less hacky solution that also prevents the property from being unnecessarily rendered to the DOM

user_54458980

I ran into the same issue with styled-components and I ended up doing something like this:

<Icon isactive={isActive.toString()} />

${props =>
  props.isactive === 'true' &&
  css`
    transform: rotate(-180deg);
  `};
}
user_56319270

I had a similar issue and fixed the error by passing the props into a Styled Component instead of a normal html element. For you, you would change the svg element to something like this:

import React from 'react';
export default (props) => (
  <SvgStyledComp {...props}>
    <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd"/>
  </SvgStyledComp>
);
const SvgStyledComp = styled.svg`
  ${props => props.isActive && css`
    transform: rotate(-180deg);
  `};
`;
user_74016600

You can use transient-props.

here is tsx example :

Button is antd Button

import { Button } from 'antd';
import styled from 'styled-components';

interface IMyButtonProps {
    $switchShape: boolean;
    $myColor: string;
    $myBorderColor: string;
}

let MyButton = styled(Button).attrs<IMyButtonProps>((props) => {
   
    // console.log(props);
   
    let myShape = props.$switchShape ? 'circle' : 'round';

    return { type: 'primary', shape: myShape };

})<IMyButtonProps>`

    margin-left: 10px;

    ${{
        padding: '100px',
    }}

    ${(props) => {
        
        // You can get the result of Attrs
        // console.log(props);
        
        return `
            color:${props.$myColor}
        `;
    }};

    ${(props) => {
        // CSSProperties
        return {
            borderColor: props.$myBorderColor,
        };
    }};
`;

ghost is antd Button attr

<MyButton ghost={true} $switchShape $myBorderColor='black' $myColor='red'>
    click me
</MyButton>
user_155436300

Simple way to fix this error is change props name to '$ + props_name'

  • Example:

    interface MenuItemProps extends TypographyProps { $isActive?: boolean; }

user_171465000
Related