样式化的组件–定义组件时的访问道具

如何解决样式化的组件–定义组件时的访问道具

我正在尝试在定义组件时找到一种访问道具的方法，以便为基础组件提供一个动态的，可定义的显示名称（为清晰起见，在浏览器中使用dev和react开发工具）

供参考：

export default styled("div").withConfig({
  displayName: "test",})(def,base,compose(space,layout,typography,color,flexBox));

将呈现以下内容：<div class="test-ljprX fnCjCk"></div>

我正在尝试类似的操作

export default styled("div").withConfig({
  displayName: (props) => props.displayName,flexBox)); //< (css and styled-system)

但这会渲染<div class="sc-bdnylx cPfcvX"></div>
与组件没有明显区别，也没有找到错误日志。

例如，props.displayName为"Container"时，期望的结果应该是这样的：
<div class="Container-ljprX fnCjCk"></div>

但是在定义组件的这一阶段我无法弄清楚如何访问道具。

关于如何实现上述目标的任何想法吗？

更新

---

添加

Test.displayName = "Container";已使组件名称至少在React开发工具中显示出来。如果课程也显示出来，那就太好了。

喜欢

import Foo from "./Foo"; //the base component described earlier

const styles = css`
  display: flex;
  padding: 2rem;
`;
const Test = ({ children,...props }) => {
  return (
    <Foo css={styles} {...props}>
      {children}
    </Foo>
  );
};

Test.displayName = "Container";

export default Test;