Использование реквизитов ThemeProvider в Global Styled-Components

Question

Как получить доступ к ThemeProvider props в global.js при использовании styled-components ?

Например, в theme.js у меня есть${props => props.theme.fonts.fontSize} вызов размера шрифта по умолчанию 16px

const theme = {
    fonts: {
        fontSize : '16px',
    }
}

export default theme

Это предоставляется в /layouts/index.js как

import React from 'react'

import { ThemeProvider } from 'styled-components'
import '../style/global';
import theme from '../style/theme'

class Template extends React.Component {
  render() {
    const { children } = this.props

    return (
      <ThemeProvider theme={theme}>
        ...
        {children()}
        ...
      </ThemeProvider>
    )
  }
}

export default Template

Отсюда я могу получить доступ к ${props => props.theme.fonts.fontSize} в каждом компонентеили дочерняя страница.

Но как я могу перейти на global.js таким же образом, если глобально технически уровень выше theme.js?Чтобы я мог создать глобальный стиль как

injectGlobal`
  html {
    font-size: (${props => props.theme.fonts.fontSize} / 16px) * 1em;
  }
`

Answer 1

Самый простой способ решить эту проблему - создать компонент верхнего уровня, который внедрит желаемый стиль следующим образом:

import { Children } from 'react';
import { withTheme, injectGlobal } from 'styled-components';

const GlobalComponent = ({ theme, children }) => {
  injectGlobal`
      font-size: ${theme.fonts.fontSize}
    }
  `;
  return Children.only(children);
};

export default withTheme(Global);

Это обеспечит желаемое значение для всех компонентов, имеющих этот компонент в качестве родительского.globalStyling.Надеюсь, что это помогло