如何用emotion/react为Chakra UI Select组件设置背景色及悬停变色

核心原因 #

原生HTML的<option>元素样式受浏览器原生限制，大部分伪类（比如:hover）和自定义背景色无法通过常规CSS生效——这就是你用styled.option设置样式但没效果的根本原因。Chakra UI的默认Select组件是基于原生<select>封装的，所以直接自定义<option>样式行不通。

推荐解决方案：改用Chakra Menu组件模拟自定义Select #

用Chakra的Menu系列组件替代原生Select，可以完全控制选项的悬停、选中样式，不受浏览器限制：

1. 导入所需组件：

import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
import { DropdownIcon } from '@chakra-ui/icons'; // 替换成你使用的下拉图标
import styled from '@emotion/styled';

2. 自定义MenuItem样式：

const StyledMenuItem = styled(MenuItem)`
  /* 悬停状态样式 */
  &:hover {
    background-color: yellow;
  }
  /* 选中状态样式（对应原Select的选中选项） */
  &.chakra-menu__item--active {
    background-color: red;
  }
`;

3. 替换原Select组件：

<Menu>
  {/* 模拟Select的触发按钮 */}
  <MenuButton 
    as="button"
    fontWeight="600"
    border="none"
    background="transparent"
    fontSize="20px"
    color={colors.primary}
    padding="0 5px"
    display="flex"
    alignItems="center"
    sx={{
      '& > svg:last-child': {
        marginLeft: '4px', // 调整图标位置，匹配原代码布局
      }
    }}
  >
    {/* 显示当前选中值 */}
    {yearsRange[date.getFullYear()]}
    <DropdownIcon />
  </MenuButton>
  
  {/* 模拟下拉选项列表 */}
  <MenuList>
    {yearsRange.map((year) => (
      <StyledMenuItem 
        key={year}
        {/* 模拟原Select的onChange逻辑 */}
        onClick={() => handleYearChange({ target: { value: year } })}
        {/* 标记当前选中的选项 */}
        isActive={year === yearsRange[date.getFullYear()]}
      >
        {year}
      </StyledMenuItem>
    ))}
  </MenuList>
</Menu>

额外说明 #

• 如果你坚持要用原生Select，只能通过全局CSS修改选中状态（但:hover样式在多数浏览器里仍无法自定义）：

/* 在全局样式文件中添加 */
select option:checked {
  background-color: red !important;
}

这种方法不推荐，因为会影响页面中所有原生select组件。

• 你原代码里的background_color是拼写错误，正确应该是background-color，但即使修正也无法生效，因为原生<option>的样式限制。

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