styled-components it looks like an unknown prop “items“ is being sent through to the DOM, which wil

styled-components: it looks like an unknown prop “items” 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.)

遇到如上报错信息

解决 配置shouldForwardProp

0 属性名 $ 起手

1 单独配置

export const FlexDiv = styled.div.withConfig({
    shouldForwardProp: props =>
        !["justify", "items", "space", "column", "flex", "height", "width", "center"].includes(props),
})<{
    justify?: JustifyContentProps;
    items?: AlignItems;
    space?: string;
    column?: boolean;
    flex?: number;
    height?: string;
    width?: string;
    center?: boolean;
}>`
    display: flex;
    justify-content: ${props => props.justify || (props.center && "center")};
    align-items: ${props => props.items || (props.center && "center")};
    flex-direction: ${props => (props.column ? "column" : "row")};
    flex-wrap: wrap;
    ${({ space }) => space && `& > * {margin: ${space};}`};
    ${({ flex }) => flex && `flex:${flex}`};
    ${({ height }) => height && `height:${height}`};
    ${({ width }) => width && `width:${width}`};
`;

2 全局配置 @emotion/is-prop-valid

<StyleSheetManager sheet={styledComponentsStyleSheet.instance} shouldForwardProp={isPropValid}>
    {children}
</StyleSheetManager>

"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
import isPropValid from '@emotion/is-prop-valid'

export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });

  if (typeof window !== "undefined") return <>{children}</>;

  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance} shouldForwardProp={isPropValid}>
      {children}
    </StyleSheetManager>
  );
}