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

admin管理员组

文章数量:1279124

I have the following svg ponent 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-ponent 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.

I have the following svg ponent 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-ponent 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.

• javascript
• css
• reactjs
• ecmascript-6
• styled-ponents

Share Improve this question Follow edited Oct 18, 2019 at 9:57 peter flanagan asked Oct 18, 2019 at 9:02 peter flanaganpeter flanagan 9,8302727 gold badges8181 silver badges139139 bronze badges 1

• Is there something specific about the name isActive? – mikemaccana Commented May 10, 2021 at 13:09

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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

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

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

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

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);
  `};
`;

You can use transient-props.

here is tsx example :

Button is antd Button

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

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>

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

• Example:

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

本文标签： javascriptReact does not recognize the isActive prop on a DOM elementstyledcomponentsStack Overflow