Reactjs 如何从React/NextJS中的render中访问EProvider/styled components样式

我的代码设置是这样工作的

_app.js

<ThemeProvider theme={clientGroupTheme}>
    <GlobalStyles />
    <Layout>
      <Component {...this.props} />
    </Layout>
</ThemeProvider>

someComponent.js

import { createGlobalStyle } from 'styled-components'
export const LoginMenuStyles = createGlobalStyle`
    .exampleClass {
         color:${(props) => props.theme.secondaryColor};
    }`

class LoginMenu extends React.Component {
    render() {
        return ( <>
                <div className="exampleClass">Test</div>
                <PassColorComponent myColor={${(props) => props.theme.secondaryColor}} /> //This
            </>
        )
    }
}

从“样式化组件”导入{createGlobalStyle}
export const LoginMenuStyles=createGlobalStyle`
.示例类{
颜色：${（props）=>props.theme.secondaryColor}；
}`
类LoginMenu扩展了React.Component{
render（）{
报税表（
试验
props.theme.secondaryColor}}//This
)
}
}

基本上，我希望传递与道具相同的颜色值（//This）。它在styled component类中工作良好，但我可以让它在render方法中工作并传递给该组件。 可能吗？我接近了吗？

---

谢谢

创建样式化组件时，主题仅在

样式化

函数中可用。如果您想访问React组件，例如，可以直接将主题作为道具向下传递

<Component {...this.props} theme={clientGroupTheme} />

然后，您将能够访问主题对象

---

我认为“withTheme”高阶组件正是您需要的

import { withTheme } from 'styled-components'


class LoginMenu extends React.Component {
    render() {
        return ( <>
                <div className="exampleClass">Test</div>
                <PassColorComponent myColor={this.props.theme.secondaryColor} />
            </>
        )
    }
}

export default withTheme(LoginMenu);

从“样式化组件”导入{withTheme}
类LoginMenu扩展了React.Component{
render（）{
报税表（
试验
)
}
}
导出带有主题的默认值（LoginMenu）；

---

不要忘记在导出时将组件包装在withTheme组件内（请参见底线）。这就是样式化的主题道具将如何传递给LoginMenu组件。

也许“在没有Sytited组件的情况下获取主题”一节将有助于您解释如何使用功能组件，如下所示：导出默认函数LoginMenu（道具）{@Thomas Byy

import{withTheme}从“样式化组件”；

功能组件（props）{

控制台.log（props.theme）

//此处的组件结构

导出带有主题的默认值（组件）
import { withTheme } from 'styled-components'


class LoginMenu extends React.Component {
    render() {
        return ( <>
                <div className="exampleClass">Test</div>
                <PassColorComponent myColor={this.props.theme.secondaryColor} />
            </>
        )
    }
}

export default withTheme(LoginMenu);