gpt4 book ai didi

javascript - 在全局样式组件中使用 ThemeProvider Prop

转载 作者:行者123 更新时间:2023-11-30 14:35:02 24 4
gpt4 key购买 nike

在使用 styled-components 时,如何访问 global.js 中的 ThemeProvider props ?

例如,在 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 在技术上高于 theme.js 时,我如何以相同的方式传递给 global.js?这样我就可以创建一个全局样式作为

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

最佳答案

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

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

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

关于javascript - 在全局样式组件中使用 ThemeProvider Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50560238/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com