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


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 => (

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 => ({
      <Component title={props.title} />

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.


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

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

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

Answered By – P Savva

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.