React不同路由下如何为<html>标签设置差异化媒体查询规则

方案1：动态给html标签加类名（兼容性最好，推荐） #

你之前的写法问题在于html是文档根节点，在所有React组件渲染的DOM外层，无法用组件内部的类名作为后代选择器匹配到，反过来给html动态加对应路由的类名即可解决：

实现步骤： #

1. 路由切换时监听路径变化，给html标签添加对应路由的类，离开时移除。如果不想每个组件单独写逻辑，可在路由根组件统一处理：

// 项目根组件/路由入口组件（如App.jsx）
import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'

function App() {
  const { pathname } = useLocation()
  useEffect(() => {
    const htmlEl = document.documentElement
    // 先移除所有路由专属类名，避免样式冲突
    htmlEl.classList.remove('Guest', 'Dashboard')
    // 根据当前路由路径加对应类
    if (pathname.startsWith('/guest')) {
      htmlEl.classList.add('Guest')
    } else if (pathname.startsWith('/dashboard')) {
      htmlEl.classList.add('Dashboard')
    }
  }, [pathname])

  // 你的路由渲染逻辑
  return <>{/* 路由出口 */}</>
}

如果不需要统一管控，也可以直接在对应组件内部加副作用：

// Guest.jsx 内部
useEffect(() => {
  document.documentElement.classList.add('Guest')
  return () => document.documentElement.classList.remove('Guest')
}, [])

2. 修改SCSS写法，直接匹配带类名的html标签：

// guest.scss
$guest-bp: 75em;
html.Guest {
  font-size: 62.5%;
  @media only screen and (max-width: $guest-bp) {
    font-size: 50%;
  }
}

// dashboard.scss
$dashboard-bp: 50em;
html.Dashboard {
  font-size: 62.5%;
  @media only screen and (max-width: $dashboard-bp) {
    font-size: 45%;
  }
}

方案2：用CSS :has选择器（无需操作DOM，注意兼容性） #

如果你的项目不需要兼容过低版本浏览器（Chrome 105+、Firefox 121+、Safari 15.4+均支持），可以直接用:has选择器匹配包含对应组件的html标签，不需要修改JS代码：

$guest-bp: 75em;
html:has(.Guest) {
  font-size: 62.5%;
  @media only screen and (max-width: $guest-bp) {
    font-size: 50%;
  }
}

$dashboard-bp: 50em;
html:has(.Dashboard) {
  font-size: 62.5%;
  @media only screen and (max-width: $dashboard-bp) {
    font-size: 45%;
  }
}

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