styled-components如何仅给父组件传一次prop供所有深层子组件访问

你可以使用styled-components内置的ThemeProvider实现主题自动透传，完全不需要手动给每个子级styled组件传递theme属性，操作方法如下：

实现步骤 #

• 首先从styled-components依赖中引入ThemeProvider组件
• 在TodoList组件最外层用ThemeProvider包裹原有结构，把接收的theme属性直接传给ThemeProvider的theme prop即可。ThemeProvider基于React Context机制实现，会自动将theme值透传给子树内所有的styled组件，所有styled组件内部可以直接读取props.theme，无需额外显式传递。

修改后代码示例 #

首先更新导入语句：

import styled, { css, ThemeProvider } from 'styled-components'

修改后的TodoList组件：

const TodoList = ({ theme }) => {
  return (
    {/* 仅在这一处传递theme即可，所有子级styled组件都能自动访问到theme */}
    <ThemeProvider theme={theme}>
      <Container>
        <Footer>
          <p>5 items left</p>
          <Nav>
            <NavItem>All</NavItem>
            <NavItem>Active</NavItem>
            <NavItem>Completed</NavItem>
          </Nav>
          <ClearList>Clear Completed</ClearList>
        </Footer>
      </Container>
    </ThemeProvider>
  )
}

export default TodoList

注意：你原本写的所有styled组件代码不需要做任何修改，原有读取props.theme的逻辑可以直接生效。

内容的提问来源于stack exchange，提问作者Idris