How to set styles outside of the styled component?

Viewed 703

I am sure, there is a way to solve this problem, but I am unable to find it. I have a react component GenericList which is a list with CRUD functionality. It has its own Popup inside.

<GenericList
  popupContent={(
    <CharterPeriodsPopup
      charter={charter}
    />
  )}

And here is the code inside GenericList

<Popup
  bodyClassName={this.props.bodyClassName}
  contentClassName={this.props.contentClassName}
  title={title}
  {...this.props.popupProps}
>
  {!popupContent ? '$popupContent': (
           cloneElement(this.props.popupContent, {...popupProps}))}
</Popup>

I want to get access to Popup inside GenericList and set styles for it through styled components. But I don't have an access to it directly.

See the screen I have downloaded. enter image description here

I need access to popup-body. With SCSS we can just set classNames and import it inside react component and it will work. But with styled-components, we have a specific scope that is related only to the styled component part. I have created styled-component for CharterPeriodsPopup.

0 Answers
Related