React, styled-components - 样式内部 styled-component

发布于 2025-01-09 08:09:44 字数 742 浏览 0 评论 0原文

我有一个演示

https://stackblitz.com/edit/react-ts-jvbeh7

这是一个使用样式组件的简单反应应用程序

我正在传递一个道具 desktop

<Block desktop>
    <InnerBlock />
</Block>

并且当道具存在时我试图设置内部样式组件的样式

const Block = styled.div<IProps>`
  background: red;
  height: 200px;
  width: 200px;

  ${InnerBlock} {
    margin: ${p => p.desktop ? '10px' : null};
  }

`;

如果我尝试这样做，我会收到错误on ${InnerBlock}

Block-scoped variable 'InnerBlock' used before its declaration.

当父级上有 prop 时，是否可以设置内部样式组件的样式

原文

I have a demo

https://stackblitz.com/edit/react-ts-jvbeh7

It's a simple react app using styled-components

I'm passing a prop desktop

<Block desktop>
    <InnerBlock />
</Block>

And I'm trying to style the inner style component when the prop is there

const Block = styled.div<IProps>`
  background: red;
  height: 200px;
  width: 200px;

  ${InnerBlock} {
    margin: ${p => p.desktop ? '10px' : null};
  }

`;

If I try this I get an error on ${InnerBlock}

Block-scoped variable 'InnerBlock' used before its declaration.

Is it possible to style an inner styled-component <InnerBlock /> when there is a prop on the parent

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

誰ツ都不明白 2025-01-16 08:09:44

找到了正确的方法。

const Block = styled.div<IProps>`
  background: red;
  height: 200px;
  width: 200px;

  ${InnerBlock} {
    ${(p) =>
      p.desktop &&
      css`
      width: 50px;
      height: 50px;
      background: yellow;
    `};
  }

`;

Found the correct way.

const Block = styled.div<IProps>`
  background: red;
  height: 200px;
  width: 200px;

  ${InnerBlock} {
    ${(p) =>
      p.desktop &&
      css`
      width: 50px;
      height: 50px;
      background: yellow;
    `};
  }

`;

回复收藏 0 原文

~没有更多了~