CODEWITHSUNDEEP
reactjsantdstyled-components
Verthon
Verthon

Reputation: 3247

How to override antd select option hover?

I have a big problem with overriding the antd default hover on option, I have tried to add custom class custom-option and override it in my styles file. Im using antd + styled components.

The select styling

import { Select } from 'antd';

import { Theme } from 'assets/theme/theme';

const { Option } = Select;

const SortSelect = styled(Select)
  .ant-select-selection {
    background-color: transparent;
  }
  .custom-option.ant-select-item {
    color: ${({ theme }: { theme: Theme }) => theme.colors.grey800};
  }
  .ant-select-arrow.anticon > svg {
    fill: ${({ theme }: { theme: Theme }) => theme.colors.grey500};
  }
  .custom-option.ant-select-item-option-active {
    background-color: ${({ theme }: { theme: Theme }) => theme.colors.white} !important;
  }
  .custom-option.ant-select-item-option-active:hover {
    font-weight: ${({ theme }: { theme: Theme }) => theme.fontWeights.bold};
  }
;

The option styling

const SortOption = styled(Option)
  padding: 0.75rem 1rem;
  .custom-option {
    color: ${({ theme }: { theme: Theme }) => theme.colors.grey800};
  }
  .custom-option {
    .ant-select-item {
      color: red;
    }
  }
  .ant-select-item .ant-select-item-option .custom-option .ant-select-item-option-active {
    background-color: ${({ theme }: { theme: Theme }) => theme.colors.white} !important;
  }
  .custom-option.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background-color: ${({ theme }: { theme: Theme }) => theme.colors.white} !important;
  }
  .ant-select-item-option-content:hover {
    font-weight: ${({ theme }: { theme: Theme }) => theme.fontWeights.bold};
  }
;

Upvotes: 0

Views: 10667

Answers (1)

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

That´s because options container are rendered in body by default. But you can change it to create inside Select element with getPopupContainer:

<SortSelect
          getPopupContainer={(trigger) => {
            return trigger;
          }}
          style={{ width: 120 }}
        >
          <SortOption value="jack">Jack</SortOption>
          <SortOption value="lucy">Lucy</SortOption>
</SortSelect>

And now you dont need your custom class and you styled-components should be:

*Don't forgot `` in style-components, like styled(Select)` ..... `;

SortSelect

const SortSelect = styled(Select)`
  .ant-select-selection {
    background-color: transparent;
  }
  .ant-select-item {
    color: ${({ theme }: { theme: Theme }) => theme.colors.grey800};
  }
  .ant-select-arrow .anticon > svg {
    fill: ${({ theme }: { theme: Theme }) => theme.colors.grey500};
  }
  .ant-select-item-option-active {
    background-color: ${({ theme }: { theme: Theme }) => theme.colors.white} !important;
  }
  .ant-select-item-option-active:hover {
    font-weight: ${({ theme }: { theme: Theme }) => theme.fontWeights.bold};
  }
`;

SortOption

const SortOption = styled(Option)`
  padding: 0.75rem 1rem;
  //.custom-option {
  //  color: ${({ theme }: { theme: Theme }) => theme.colors.grey800};
  //}

  .ant-select-item {
     color: red;
  }
  
  .ant-select-item .ant-select-item-option .custom-option .ant-select-item-option-active {
    background-color: ${({ theme }: { theme: Theme }) => theme.colors.white} !important;
  }
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background-color: ${({ theme }: { theme: Theme }) => theme.colors.white} !important;
  }
  .ant-select-item-option-content:hover {
    font-weight: ${({ theme }: { theme: Theme }) => theme.fontWeights.bold};
  }
`;

You can check more here: https://ant.design/components/select/#API

*They also inform this position issue workaround, if something like this happens to you:

When position issues happen, try to modify it into scrollable content and position it relative example

Upvotes: 3

Related Questions