I'm using an isActive property in React. It's not a native property but I would like to use it to make sense in my code logic. However, React is displaying this warning:

StyledComponent.ts:159 styled-ponents: it looks like an unknown prop "isActive" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props($ prefix for automatic filtering.)

VM2196:1 Warning: React does not recognize the isActive prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isactive instead. If you accidentally passed it from a parent ponent, remove it from the DOM element.

const { StrictMode } = React;
const { createRoot } = ReactDOM;
const { ThemeProvider } = styled;

const Container = styled.button`
    background: none;
    color: ${({ theme, isActive }) => (isActive ? theme.COLORS.ORANGE : theme.COLORS.GRAY_100)};
  
    border: none;
    font-size: 16px;
`;

function ButtonText ({ title, isActive = false, ...rest }) {
    return (
        <Container type="button" {...rest} isActive={ isActive }>
            {title}
        </Container>
    );
}

const theme = {
    COLORS: {
        ORANGE: "orange",
        GRAY_100: "grey",
    },
};

function App() {
    return (
        <ThemeProvider theme={theme}>
            <ButtonText title="Title" />
        </ThemeProvider>
    )
}

const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>);

<div id="root"></div>
<script crossorigin src="@18/umd/react.development.js"></script>
<script crossorigin src="@18/umd/react-dom.development.js"></script>
<script src=".min.js"></script>

I'm using an isActive property in React. It's not a native property but I would like to use it to make sense in my code logic. However, React is displaying this warning:

StyledComponent.ts:159 styled-ponents: it looks like an unknown prop "isActive" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props($ prefix for automatic filtering.)

VM2196:1 Warning: React does not recognize the isActive prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isactive instead. If you accidentally passed it from a parent ponent, remove it from the DOM element.

const { StrictMode } = React;
const { createRoot } = ReactDOM;
const { ThemeProvider } = styled;

const Container = styled.button`
    background: none;
    color: ${({ theme, isActive }) => (isActive ? theme.COLORS.ORANGE : theme.COLORS.GRAY_100)};
  
    border: none;
    font-size: 16px;
`;

function ButtonText ({ title, isActive = false, ...rest }) {
    return (
        <Container type="button" {...rest} isActive={ isActive }>
            {title}
        </Container>
    );
}

const theme = {
    COLORS: {
        ORANGE: "orange",
        GRAY_100: "grey",
    },
};

function App() {
    return (
        <ThemeProvider theme={theme}>
            <ButtonText title="Title" />
        </ThemeProvider>
    )
}

const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>);

<div id="root"></div>
<script crossorigin src="https://unpkg./react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg./styled-ponents/dist/styled-ponents.min.js"></script>

I tried using the $ prefix, but it didn't work. I tried using props in the poment, it didn't work either.

• javascript
• reactjs
• react-dom

• Does this answer your question? styled-ponent .attrs - React does not recognize prop – Wing Commented Aug 19, 2023 at 15:59
• I tested the solution in the linked question. Prefixing the relevant props with $ should work. If they didn't work for you, please update the code in the question to show how you were using $. I suspect, however, the problem is a misunderstanding on how to use Styled Component's transient props or a typo. – Wing Commented Aug 19, 2023 at 16:02

1 Answer 1

I've got almost exactly the same code, and I am getting the same error: I'm using styled-ponents, i've got a "Container" styled ponent, and i'm passing a boolean prop called "isActive". And I am getting the exact same error.

This used to work fine, something must be broken recently. (I am using a "vite" project, if that matters.)

Now I've tried:

const Container = styled.div`
  color: ${({ $isactive }) => ($isactive ? "white" : "gray")};
`;

and

<Container $isactive={!!user}>

Now it works. So: everywhere you have "isActive", you change it to "$isActive", and it works. I don't know why, it is not ideal, and it used to work without needing a $, but i can live with this for now.

Ah, some documentation here: https://styled-ponents./docs/api#transient-props

And apparently Evan Jacobs has written a nice article to explain exactly that: https://medium./@probablyup/introducing-transient-props-f35fd5203e0c