我想知道哪里<ThemeProvider/>
应该放在 React 应用程序中。
我想出了两个解决方案。
1、<ThemeProvider/>
应该在顶级组件中使用“仅一次”
喜欢 index.js
或 App.js
由“create-react-app”工具创建的文件。
2、<ThemeProvicer/>
应放置在“React-component 的每个根”中
字面上地。
为了澄清起见,我将向您展示一些示例。
只有两个组件,“红色”和“蓝色”<div>
标签。
1、<ThemeProvider/>
用过“只要一次”
// In './red.js'
import React from 'react'
import styled from "styled-components"
const Red = styled.div`background: ${props => props.theme.mainColor}`
export default function RedDiv() {
return (
//NOT using ThemeProvider
<Red />
)
}
// In './blue.js'
......
const Blue = styled.div`background: ${props => props.theme.subColor}`
export default function BlueDiv() {
return (
<Blue />
)
}
// In './App.js'
import React, { Component } from 'react'
import { ThemeProvider } from "styled-components"
import myTheme from "./myTheme
import Red from "./red"
import Blue from "./blue"
export default class App extends Component {
render() {
return (
//only used here just once
<ThemeProvider theme={myTheme}>
<>
<Red />
<Blue />
</>
</ThemeProvider>
)
}
}
2、
<ThemeProvider/>
使用“React-component 的每个根”// In './red.js'
import React from 'react'
import styled, { ThemeProvider } from "styled-components"
const Red = styled.div`background: ${props => props.theme.mainColor} `
export default function RedDiv() {
return (
<ThemeProvider theme={myTheme}>
<Red />
</ThemeProvider>
)
}
// In './blue.js'
......
const Blue = styled.div`background: ${props => props.theme.mainColor}`
export default function BlueDiv() {
return (
<ThemeProvider theme={myTheme}>
<Blue />
</ThemeProvider>
)
}
// In './App.js'
import React, { Component } from 'react'
import Red from "./red"
import Blue from "./blue"
export default class App extends Component {
render() {
return (
<>
// <ThemeProvider/> is not used
<Red />
<Blue />
</>
)
}
}
上面的代码可能有一些错字,但我希望这个例子能清楚地传达我的想法。
最佳答案
我只用过一次,里面index.js
.
如果需要,也是添加一些全局样式的好地方。我将它们用于 resetCSS
( http://meyerweb.com/eric/tools/css/reset/ ) 和一些 baseCSS
规则如 box-sizing
等等。
index.js
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import theme from './styles/theme';
import resetCSS from './styles/resetCSS';
import baseCSS from './styles/baseCSS';
import { BrowserRouter as Router} from "react-router-dom";
const GlobalStyle = createGlobalStyle`
${resetCSS}
${baseCSS}
`;
React.DOM.render(
<React.Fragment>
<GlobalStyle/>
<Router>
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>
</Router>
</React.Fragment>
,document.getElementById('root')
);
关于reactjs - 样式组件中 'ThemeProvider' 的最佳实践是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56310875/