样式组件：如何引用相同的组件但使用不同的道具？

Question

我有一个Container组件，它使用道具fluid作为boolean。

const Container = styled.div`
  ${({ fluid }) => ...}
`

我想将其嵌套在Navbar组件中，但使用不同的prop值。我读了styled-components' doc about referring to other components，但是示例代码很简单。这就是我想要的

const Navbar = styled.nav`
  /* Previous styles */

  ${Container // When fluid is false} {
    /* Some styles*/
  }

  ${Container // When fluid is true} {
    /* Some styles (different from above) */
  }
`

或CSS。

.navbar {
  /* Previous styles */

  .container {
    /* Some styles */
  }

  .container-fluid {
    /* Some styles */
  }
}

有什么想法可以实现？每个评论都对我表示感谢。