如何在styled-components全局样式中访问ThemeProvider的props？

嗨，这个问题确实挺典型的——毕竟全局样式的注入逻辑和普通组件不一样，默认情况下确实没法直接拿到ThemeProvider传递的theme props。不过有两种靠谱的解决方案，取决于你的styled-components版本和是否需要动态主题：

方案1：使用createGlobalStyle（推荐，支持动态主题） #

从styled-components v4开始，官方已经不再推荐使用injectGlobal了，转而推荐createGlobalStyle API，它的好处就是能像普通styled组件一样接收theme props。具体步骤如下：

1. 改造你的global.js：
   把原来的injectGlobal替换成createGlobalStyle，创建一个全局样式组件：

   import { createGlobalStyle } from 'styled-components';
   
   const GlobalStyle = createGlobalStyle`
     html {
       font-size: (${props => props.theme.fonts.fontSize} / 16px) * 1em;
     }
     // 这里可以添加其他全局样式，比如body的margin、全局字体等
   `;
   
   export default GlobalStyle;
   

2. 在ThemeProvider中引入全局样式组件：
   回到你的layouts/index.js，把GlobalStyle组件放在ThemeProvider内部，这样它就能自动接收theme props了：

   import React from 'react'
   import { ThemeProvider } from 'styled-components'
   import GlobalStyle from '../style/global'; // 导入全局样式组件
   import theme from '../style/theme'
   
   class Template extends React.Component {
     render() {
       const { children } = this.props
       return (
         <ThemeProvider theme={theme}>
           <GlobalStyle /> {/* 必须放在ThemeProvider内部 */}
           {children()}
         </ThemeProvider>
       )
     }
   }
   
   export default Template
   

这种方式的优势在于，如果后续你需要做主题切换（比如浅色/深色模式），GlobalStyle会自动响应theme的变化，重新渲染全局样式。

方案2：直接导入主题文件（仅适用于静态主题） #

如果你的主题是固定不变的，不需要动态切换，那可以直接在global.js里导入theme文件，直接使用主题值：

import { injectGlobal } from 'styled-components';
import theme from './theme'; // 直接导入主题对象

injectGlobal`
  html {
    font-size: (${theme.fonts.fontSize} / 16px) * 1em;
  }
`;

这种方式简单直接，但缺点也很明显——如果主题有变化（比如用户切换主题），全局样式不会跟着更新，因为injectGlobal是一次性注入到页面的，不会重新执行。

总的来说，如果你需要支持动态主题，或者使用的是较新版本的styled-components，方案1是最优解；如果只是静态主题，方案2可以快速解决问题。

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