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

Question

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

theme.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]};
`;

问题是，我如何将黑色[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>

关于如何让它工作的任何想法？谢谢

Answer 1

您可以使用defaultProps

import PropTypes from 'prop-types'

MyStyledContainer.defaultProps = { theme }

Answer 2

编辑：更新为使用样式组件 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};
`;

Answer 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

Answer 4

如果您在 React 中使用功能组件和 v4.x 以及更高版本的样式化组件，您需要利用 useContext 和样式化组件的 ThemeContext。总之，这些允许您 在不是 styled-components.

的组件中使用您的主题设置

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>
    </>
  )
}

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

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

How to pass Styled-Component theme variables to Components?

reactjs

styled-components