如何将 Styled-Component 主题变量传递给组件？答案

【问题标题】：How to pass Styled-Component theme variables to Components?如何将 Styled-Component 主题变量传递给组件？
【发布时间】：2018-04-14 18:14:52
【问题描述】：

在我的 React+StyledComponent 应用程序中，我有一个像这样的主题文件：

主题.js：

const colors = {
  blacks: [
    '#14161B',
    '#2E2E34',
    '#3E3E43',
  ],
};

const theme = {
  colors,
};

export default theme;

目前，我可以轻松地使用这些颜色来设置组件的样式，如下所示：

const MyStyledContainer = styled.div`
  background-color: ${(props) => props.theme.colors.blacks[1]};
`;

问题是，我如何将 blacks[1] 传递给组件作为要使用的颜色的道具，如下所示：

<Text color="black[1]">Hello</Text>

Text.js 在哪里：

const StyledSpan = styled.span`
  color: ${(props) => props.theme.colors[props.color]};
`;

const Text = ({
  color,
}) => {
  return (
    <StyledSpan
      color={color}
    >
      {text}
    </StyledSpan>
  );
};

Text.propTypes = {
  color: PropTypes.string,
};

export default Text;

目前，上述内容正在静默失败并在 DOM 中呈现以下内容：

<span class="sc-brqgn" color="blacks[1]">Hello</span>

关于如何让它发挥作用的任何想法？谢谢

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

编辑：更新为使用样式组件withTheme HOC

新答案

您可以将组件渲染 <Text> 包装在 styled-components 提供的高阶组件 (HOC) withTheme 中。这使您可以直接在 React 组件中使用为 <ThemeProvider> 指定的主题。

示例（基于the styled-components docs）：

import React from 'react'
import { withTheme } from 'styled-components'
import Text from './Text.js'

class MyComponent extends React.Component {
  render() {
    <Text color={this.props.theme.colors.blacks[1]} />;
  }
}

export default withTheme(MyComponent)

那你就可以了

const MyStyledContainer = styled.div`
    background-color: ${(props) => props.color};
`;

旧答案

您可以导入您渲染的主题并传递<Text color={theme.blacks[1]} />。

import theme from './theme.js'
...
<Text color={theme.colors.blacks[1]} />

那你就可以了

const MyStyledContainer = styled.div`
    background-color: ${(props) => props.color};
`;

【讨论】：

【解决方案2】：

您可以使用defaultProps

import PropTypes from 'prop-types'

MyStyledContainer.defaultProps = { theme }

【讨论】：

【解决方案3】：

App.js

应用获取主题并将颜色传递给文本

import React, { Component } from 'react'
import styled from 'styled-components'

const Text = styled.div`
  color: ${props => props.color || 'inherit'}
`

class App extends Component {
  render() {
    const { theme } = this.props
    return (
      <Text color={theme.colors.black[1]} />
    )
  }
}

export default App

Root.js

根组件将主题传递给整个应用程序。

import React, { Component } from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'
import App from './App'

class Root extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    )
  }
}

export default Root

【讨论】：

【解决方案4】：

如果您在 React 和 v4.x 和更高样式的组件中使用函数式组件，则需要利用 useContext 和样式组件的 ThemeContext。总之，这些允许您在非样式化组件的组件内使用主题设置。

import { useContext } from 'react'
import { ThemeContext } from 'styled-components'
    
export default function MyComponent() {
      
  // place ThemeContext into a context that is scoped to just this component
  const themeProps = useContext(ThemeContext)

  return(
    <>
      {/* Example here is a wrapper component that needs sizing params */}
      {/* We access the context and all of our theme props are attached to it */}
      <Wrapper maxWidth={ themeProps.maxWidth }>
      </Wrapper>
    </>
  )
}

进一步阅读 styled-components 文档：https://styled-components.com/docs/advanced#via-usecontext-react-hook

【讨论】：