样式组件中 'ThemeProvider' 的最佳实践是什么？

Question

我想知道 <ThemeProvider/> 应该放在 React 应用中的什么地方。

我想出了两个解决方案。

1、<ThemeProvider/>应该在top-root组件中使用'Just Once' 例如 index.js 或 App.js 由 'create-react-app' 工具创建的文件。

2、<ThemeProvicer/>应该放在'Each root of React-component' 从字面上看。

为便于说明，我将向您展示一些示例。只有两个组件，'Red' 和 'Blue' <div> 标签。

1, <ThemeProvider/> 使用 'Just Once'

// 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/> 使用 'Each root of 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 />
            </>
        )
    }
}

上面的代码可能有一些错别字，但我希望这个例子能清楚地表达我的想法。

Answer 1

我只用过一次，在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')
);

样式组件中 'ThemeProvider' 的最佳实践是什么？

What is best practice of 'ThemeProvider' in styled-components?

reactjs

styled-components