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

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 样式中导入的 'Component'，但没有任何效果。只有当我在第二个文件中声明 'Component' 时它才有效。难道没有别的办法因为我想让他们分开吗？

P.S：还尝试将 'classname' 传递给第一个文件中的 Wrapper，正如它在 styled-components 文档中所说的那样，但它似乎仍然不起作用。

Answer 1

其实你已经很接近了。当您在样式化组件中定位另一个样式化组件时，如下所示：

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

家长希望收到一个 Styled Component，而不是 React 组件。更改第一个文件中的导出，然后试试这个：

export default styled(Component);

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

How to select a nested styled-component that is imported from another file

css

reactjs

styled-components