Question

我有以下React Header组件，我正在其中尝试从ThemeContext.Consumer获取主题值并将其传递到我的NavListItem中。它目前正在（某种程度上）工作，但我只想通过一次并在全球范围内应用。不必每次使用样式化组件时都必须写theme={theme.typography.navigation}？

import React from "react"
import { Link } from "gatsby"
import PropTypes from "prop-types"
import styled from "styled-components"

import ThemeContext from "../context/ThemeContext"

const Main = styled.header`
  height: 70px;
  background-color: white;
  position: fixed;
  width: 100%;
  left: 0;
`

const NavWrapper = styled.div`
  position: relative;
`

const NavListLeft = styled.ul`
  color: black;
  position: absolute;
  top: 25px;
  left: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
`

const NavListItem = styled.li`
  display: inline-block;
  margin: 0 10px;
  font-family: ${props => props.theme};
  font-size: 16px;
`

const Header = ({ siteTitle }) => (
  <ThemeContext.Consumer>
    {theme => (
      <Main>
        <NavWrapper>
          <NavListLeft>
            <NavListItem theme={theme.typography.navigation}>
              <Link style={{color: 'black'}}>Women</Link>
            </NavListItem>
            <NavListItem theme={theme.typography.navigation}>Men</NavListItem>
            <NavListItem theme={theme.typography.navigation}>Designers</NavListItem>
            <NavListItem theme={theme.typography.navigation}>Collection</NavListItem>
            <NavListItem theme={theme.typography.navigation}>Sale</NavListItem>
          </NavListLeft>
        </NavWrapper>
      </Main>
    )}
  </ThemeContext.Consumer>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

Answer 1

您可以创建一个使用主题的NavListItem。

const ThemedNavListItem = styled.li`
  display: inline-block;
  margin: 0 10px;
  font-family: ${props => props.theme.typography.navigation};
  font-size: 16px;
`

const NavListItem = props => (
  <ThemeContext.Consumer>
    {theme => <ThemedNavListItem {...props} theme={theme} />}
  </ThemeContext.Consumer>
);

const Header = ({ siteTitle }) => (
  <Main>
    <NavWrapper>
      <NavListLeft>
        <NavListItem>
          <Link style={{color: 'black'}}>Women</Link>
        </NavListItem>
        <NavListItem>Men</NavListItem>
        <NavListItem>Designers</NavListItem>
        <NavListItem>Collection</NavListItem>
        <NavListItem>Sale</NavListItem>
      </NavListLeft>
    </NavWrapper>
  </Main>
);

使用styled-components ThemeProvider的简单解决方案。

用于主题化的辅助组件。将主题注入所有样式通过上下文在组件树中其下方任何位置的组件 API。

const NavListItem = styled.li`
  display: inline-block;
  margin: 0 10px;
  font-family: ${props => props.theme.typography.navigation};
  font-size: 16px;
`

const Header = ({ siteTitle }) => (
  <ThemeProvider theme={theme}>
    <Main>
      <NavWrapper>
        <NavListLeft>
          <NavListItem>
            <Link style={{color: 'black'}}>Women</Link>
          </NavListItem>
          <NavListItem>Men</NavListItem>
          <NavListItem>Designers</NavListItem>
          <NavListItem>Collection</NavListItem>
          <NavListItem>Sale</NavListItem>
        </NavListLeft>
      </NavWrapper>
    </Main>
  </ThemeProvider>
);

使用themeContext响应样式化的组件

1 个答案: