如何在theme-ui sx属性的样式对象媒体查询中使用CSS变量？

问题根本原因 #

CSS 规范本身不支持在媒体查询的条件表达式中使用 var() 调用CSS自定义属性，这和你使用的 Next.js、Theme UI 框架无关，你尝试加引号的写法也不解决本质问题。

解决方案 #

方案1：使用Theme UI原生响应式语法（推荐） #

Theme UI 内置了响应式数组语法，直接适配框架设计规则，是官方推荐的最佳实践：

1. 先在你的 Theme 配置文件中定义断点：

// theme.js 配置示例
export default {
  // 按从小到大顺序定义断点，对应索引0、1、2...
  breakpoints: ['768px', '1024px', '1280px'],
  // 其他theme配置
}

2. 改造你的样式代码，用数组对应不同断点下的样式值：

const styles = {
  headerLinkContainer: {
    width: '500px',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    // 索引0对应<768px屏幕：显示；索引1对应>=768px（即你定义的medium-devices）屏幕：隐藏
    display: ['flex', 'none']
  },
}

方案2：JS侧统一维护断点值实现同步 #

如果你需要全局CSS变量和JS侧的断点值保持一致，避免两边重复定义：

1. 统一在JS侧维护所有断点常量：

// constants/breakpoints.js 统一维护
export const BREAKPOINTS = {
  sm: '640px',
  md: '768px', // 和你--medium-devices的值保持一致
  lg: '1024px'
}

2. 将常量注入全局CSS变量（可以在全局CSS文件、_app.tsx等入口处注入）：

:root {
  --medium-devices: ${BREAKPOINTS.md};
}

3. 写媒体查询时直接用JS常量拼接查询条件：

const styles = {
  headerLinkContainer: {
    width: '500px',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    [`@media screen and (min-width: ${BREAKPOINTS.md})`]: {
      display: 'none',
    }
  },
}

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