Tailwind-Styled-Components中hover状态dark属性解析失效求助

你的问题出在tailwind-styled-components对带状态前缀（如hover:）的动态插值处理逻辑上。直接在hover:后面拼接动态函数返回值时，库无法正确解析暗黑模式参数，导致hover状态的样式不会随dark属性变化。

修复方案一：在配色对象中直接包含状态前缀 #

修改配色定义，把hover状态的类直接带上hover:前缀：

const lightPalette = {
  // ... 其他属性保持不变
  list: { static: "bg-black", hover: "hover:bg-slate-200" },
}

const darkPalette = {
  // ... 其他属性保持不变
  list: { static: "bg-white", hover: "hover:bg-slate-800" },
}

然后在组件中直接引用该属性，无需再加hover:前缀：

export const NavbarListLI = tw.li`
   flex flex-row justify-between items-center
   mx-5 bg-slate-100 px-3 py-2 rounded-xl cursor-pointer
   ${({ dark }) => Colors(dark).buttons.primary}
   ${({ dark }) => Colors(dark).list.hover}
   hover:rounded-full
`

修复方案二：动态拼接完整的状态类 #

如果不想修改配色对象，也可以在组件模板中动态拼接包含hover:前缀的完整类名：

export const NavbarListLI = tw.li`
   flex flex-row justify-between items-center
   mx-5 bg-slate-100 px-3 py-2 rounded-xl cursor-pointer
   ${({ dark }) => Colors(dark).buttons.primary}
   ${({ dark }) => `hover:${Colors(dark).list.hover}`}
   hover:rounded-full
`

原理说明 #

tailwind-styled-components在解析模板字符串时，静态前缀（如hover:）和动态插值的组合不会被正确处理成完整的状态类。而将整个hover:bg-xxx作为动态返回值，或者在动态函数中拼接出完整类名，才能让库正确识别并生成对应暗黑/亮色模式下的hover样式。

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