React中isActive自定义Prop触发警告，求解决方法

问题分析 #

自定义 isActive prop 被传递给了底层 DOM 元素（button），而 React 不识别非原生 DOM 属性，因此触发警告。styled-components 提供了两种有效解决方向，下面是具体实现：

方案一：正确使用瞬态 Props（推荐） #

瞬态 props 通过添加 $ 前缀实现自动过滤，需同时修改传递逻辑和样式模板中的引用：

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

$isActive 会被 styled-components 自动过滤，不会传递给 DOM 元素，彻底消除警告。

方案二：使用 shouldForwardProp 过滤属性 #

如果不想使用前缀，可以通过 withConfig 明确排除 isActive 传递给 DOM：

无需外部依赖的简化版 #

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

// ButtonText 组件保持原有逻辑不变
function ButtonText ({ title, isActive = false, ...rest }) {
    return (
        <Container type="button" {...rest} isActive={isActive}>
            {title}
        </Container>
    );
}

更严谨的版本（需安装 @emotion/is-prop-valid） #

若要确保仅排除自定义属性、保留所有原生 DOM 有效属性，可借助 @emotion/is-prop-valid 做验证：

// 若使用 CDN，可添加此脚本：<script src="https://unpkg.com/@emotion/is-prop-valid/dist/is-prop-valid.umd.js"></script>

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

为什么之前的尝试没生效？ #

• 仅给 prop 加 $ 前缀但未在样式模板中用 $isActive 引用，styled-components 仍会传递原 isActive 属性；
• 组件内处理 props 时未正确排除 isActive 再传递给 Container，导致它依然被传给 DOM 元素。

内容的提问来源于stack exchange，提问作者Esdras Castro Ferreira