我使用chakra ui作为组件，使用emotion/react作为样式。我正在努力改变所选选项的背景颜色，并在悬停时改变backrgoung-color。我已经在文档中完成了：https://chakra-ui.com/docs/components/select/usage#usage我没有看到那里我怎么能自定义选项从选择组件.
在这里你可以找到我的选择看起来像一些排序的选择字段自定义后：

<Select
          icon={<DropdownIncon />}
          value={yearsRange[date.getFullYear()]}
          onChange={handleYearChange}
          fontWeight="600"
          border="none"
          background="transparent"
          fontSize="20px"
          color={colors.primary}
          sx={{
            appearance: 'none',
            padding: '0 5px',
            paddingInlineStart: 'none',
            WebkitPaddingStart: 'none',
            '& + .chakra-select__icon-wrapper': {
              order: -1,
              position: 'static',
              transform: 'none',
            },
          }}
          rootProps={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          {yearsRange.map((year) => (
            <StyledOption key={year} value={year}>
              {year}
            </StyledOption>
          ))}
        </Select>

在外部文件中，我有这样的样式：

import styled from '@emotion/styled';

export const StyledOption = styled.option`
  :hover {
    background-color: yellow;
  }

  background-color: red;
  :active {
    background_color: pink;
  }
`;

什么都没有发生，我仍然有默认颜色的选定选项