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

Question

I Have the following scenario:

This should be a reusable component to be imported in different parts of the app

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;
);

That component will be imported in another component and some of it's styling should be overwritten

....
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>
})

My issue that is I tried a lot of tactics to target the imported 'Component' inside the NewWrapper styling, but nothing works. Only If I declare 'Component' inside the second file does it works. Isn't there another way because I want them to be separated?

P.S: Also tried to pass 'classname' to the Wrapper in the first file as it says in the styled-components doc, but it still didn't seem to work.

Answer 1

You're quite close actually. When you're targeting another Styled Component inside a Styled Component, like this:

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

The parent expects to receive a Styled Component, not a React component. Change your export in the first file, and try this:

export default styled(Component);