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

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/58447435/react-does-not-recognize-the-isactive-prop-on-a-dom-element-styled-component