代码之家 › 专栏 › 技术社区 › Darren

在全局样式的组件中使用ThemeProvider属性

styled-components reactjs javascript

Darren · 技术社区 · 6 年前

我怎样才能进入 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_ 在每个组件或子页中。

但是我怎样才能通过 全球JS theme.js ?这样我就可以创建一个全球风格

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

1 回复 | 直到 6 年前

jovi De Croock 6 年前

解决这个问题的最简单的方法是创建一个顶级组件,它可以像这样注入您想要的样式:

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

这将确保将此组件作为父组件的所有组件都具有所需的全局性。希望这有帮助

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前