Использование правил стилизованного компонента в `createGlobalStyle`

Question

Не знакомы со стилизованными компонентами, и мне интересно, есть ли у кого-нибудь совет, как использовать правила стилизованного компонента в вызове createGlobalStyle?

Приведенный ниже пример работает, но я чувствую, что это не очень хорошее решение, поскольку componentStyle.rules отсутствует в официальных api docs.

// A styled component
import Modal from '../Modal'
import styled, { createGlobalStyle } from 'styled-components'

const StyledComponent = styled(Modal)`
  background-color: pink;  
`

createGlobalStyle`
  // this div is mounted outside of the React root
  .modal-from-external-library {
    ${StyledComponent.componentStyle.rules}
  }
`

Answer 1

Не уверен, что то, что я пытался сделать, было возможно, но я решил проблему, экспортировав css из модала, используя css функцию стилизованных компонентов.

// Modal.js

const styles = css`
  // styles here
`

export default styled.div`
  ${styles}
`

// ... later 
const GlobalStyles = createGlobalStyle`${styles}`

render() { return (<GlobalStyles {...props} />) }