Question

样式化组件的新功能，想知道是否有人对createGlobalStyle的调用中如何使用样式化组件的规则提出建议？

下面的示例正在运行，但是我感觉它不是一个很好的解决方案，因为componentStyle.rules不在官方的api文档中。

// 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函数从Modal导出css解决了问题。

// Modal.js

const styles = css`
  // styles here
`

export default styled.div`
  ${styles}
`

// ... later 
const GlobalStyles = createGlobalStyle`${styles}`

render() { return (<GlobalStyles {...props} />) }

在`createGlobalStyle`中使用样式化组件的规则

1 个答案: