admin管理员组文章数量:1323744
How can I access the ThemeProvider
props
in global.js
when using styled-ponents?
For example in theme.js I have ${props => props.theme.fonts.fontSize}
calling a default font size of 16px
const theme = {
fonts: {
fontSize : '16px',
}
}
export default theme
This is provided in /layouts/index.js
as
import React from 'react'
import { ThemeProvider } from 'styled-ponents'
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
From here I can access the ${props => props.theme.fonts.fontSize}
within each ponent or child page.
But how can I pass to global.js
in the same way when global is technically a level above theme.js
? So that I could create a global style as
injectGlobal`
html {
font-size: (${props => props.theme.fonts.fontSize} / 16px) * 1em;
}
`
How can I access the ThemeProvider
props
in global.js
when using styled-ponents?
For example in theme.js I have ${props => props.theme.fonts.fontSize}
calling a default font size of 16px
const theme = {
fonts: {
fontSize : '16px',
}
}
export default theme
This is provided in /layouts/index.js
as
import React from 'react'
import { ThemeProvider } from 'styled-ponents'
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
From here I can access the ${props => props.theme.fonts.fontSize}
within each ponent or child page.
But how can I pass to global.js
in the same way when global is technically a level above theme.js
? So that I could create a global style as
injectGlobal`
html {
font-size: (${props => props.theme.fonts.fontSize} / 16px) * 1em;
}
`
Share
Improve this question
asked May 28, 2018 at 6:20
DarrenDarren
2,29010 gold badges48 silver badges104 bronze badges
2 Answers
Reset to default 4The easiest way off solving this is by creating a top level ponent that injects your desired styling like this:
import { Children } from 'react';
import { withTheme, injectGlobal } from 'styled-ponents';
const GlobalComponent = ({ theme, children }) => {
injectGlobal`
font-size: ${theme.fonts.fontSize}
}
`;
return Children.only(children);
};
export default withTheme(Global);
This will make sure all Components that have this Component as a parent will have the desired globalStyling. Hope this helped
Late but now we can actually create a Global Component and pass it as a child of ThemeProvider
. It will allow you to access all the props of current theme
.
Example for applying font family:
Your Global.js / Global.ts
import { createGlobalStyle } from "styled-ponents";
const GlobalStyle = createGlobalStyle`
html,
body {
padding: 0;
margin: 0;
font-family: ${(props) => props.theme.font.family}
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
`;
export default GlobalStyle;
Your Main ponent app.tsx / app.jsx
import theme...
import { ThemeProvider } ...
imort GlobalStyle from '../path-to-global-file';
const App ...
.
.
return(
<>
<ThemeProvider theme={theme}>
<GlobalStyle />
{ /* Root ponent */ }
<Component/>
</ThemeProvider>
</>
);
You can use the props easily now.
本文标签: javascriptUsing ThemeProvider props in Global StyledComponentsStack Overflow
版权声明:本文标题:javascript - Using ThemeProvider props in Global Styled-Components - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742117584a2421540.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论