如何在styled-components的createGlobalStyle中使用Hooks？求解决方案

因为createGlobalStyle是普通函数，没法直接在里面用React Hooks，给你几个可行的解决办法：

1. 直接在CSS中写媒体查询 #

这是最直接的方式，不需要依赖Hook，完全用原生CSS媒体查询实现：

export const GlobalStyle = createGlobalStyle`
  p {
    padding: 0; // 移动端默认样式
    @media (min-width: 768px) {
      padding: 12px; // 桌面端样式
    }
  }    
`

这种方式兼容性好，逻辑也简单，适合不需要动态控制的场景。

2. 把媒体查询状态通过props传给GlobalStyle #

先在根组件里用Hook获取媒体查询状态，再把状态作为props传给全局样式组件：
首先是根组件：

import { useMediaQuery } from 'react-responsive';
import { GlobalStyle } from './GlobalStyle';

function App() {
  const isDesktop = useMediaQuery({ minWidth: 768 });
  
  return (
    <>
      <GlobalStyle isDesktop={isDesktop} />
      {/* 其他页面内容 */}
    </>
  );
}

然后修改GlobalStyle：

export const GlobalStyle = createGlobalStyle`
  p {
    padding: ${props => props.isDesktop ? '12px' : '0'};
  }    
`

这种方式符合React Hook的使用规则，把Hook放在组件内部，再传递状态给全局样式。

3. 用CSS变量配合Hook动态更新 #

通过全局CSS变量来传递样式值，在根组件里用Hook监听媒体查询变化，动态修改CSS变量：
根组件代码：

import { useMediaQuery } from 'react-responsive';
import { useEffect } from 'react';
import { GlobalStyle } from './GlobalStyle';

function App() {
  const isDesktop = useMediaQuery({ minWidth: 768 });
  
  useEffect(() => {
    // 给根元素设置CSS变量
    document.documentElement.style.setProperty('--p-padding', isDesktop ? '12px' : '0');
  }, [isDesktop]);
  
  return (
    <>
      <GlobalStyle />
      {/* 其他页面内容 */}
    </>
  );
}

GlobalStyle里直接用这个CSS变量：

export const GlobalStyle = createGlobalStyle`
  p {
    padding: var(--p-padding);
  }    
`

这种方式不需要给GlobalStyle传props，适合多个组件或全局样式都需要用到同一个媒体查询状态的场景。

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