如何选择从另一个文件导入的嵌套样式组件

Question

我有以下方案：

这应该是可重复使用的组件，要在应用程序的不同部分中导入

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
// some basic styling here
`

const DisplayInfo = styled.div`
//more styling
`

const Component = props => (
   <Wrapper>
       <DisplayInfo>{props.title}</DisplayInfo>
   </Wrapper>

export default Component;
);

该组件，该组件将在另一个组件中导入，并且某些造型应该被覆盖

....
import Component from './Component';

const NewWrapper = styled.div`
   //here I should select the ${Component} and overwrite some of it's css
`;

const ParentComponent = props => ({
    <NewWrapper>
      <Component title={props.title} />
    </NewWrapper>
})

我的问题，我尝试了很多策略来定位在NewWrapper样式中导入的“组件”，但没有任何作用。只有当我在第二个文件中声明“组件”时，才能起作用。 没有其他方法是因为我希望它们分开吗？

PS：还试图将“ classname”传递给第一个文件中的包装器，如样式组件文档中所述，但似乎仍然没有用。

Answer 1

您实际上很近。当您针对样式组件中的另一个样式组件时，诸如此类：

const StyledParent = styled.div`
  ${StyledChild} {
    ...styles
  }
`;

父母期望接收样式的组件，而不是React组件。在第一个文件中更改导出，然后尝试以下操作：

export default styled(Component);