Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select Arrow Icon #1052

Open
topazur opened this issue Jun 26, 2024 · 1 comment
Open

Select Arrow Icon #1052

topazur opened this issue Jun 26, 2024 · 1 comment

Comments

@topazur
Copy link

topazur commented Jun 26, 2024

 arrowNode = (
      <TransBtn
        className={classNames(`${prefixCls}-arrow`, {
          [`${prefixCls}-arrow-loading`]: loading,
+         [`${prefixCls}-arrow-clear`]: mergedAllowClear,
        })}
        customizeIcon={suffixIcon}
        customizeIconProps={{
          loading,
          searchValue: mergedSearchValue,
          open: mergedOpen,
          focused: mockFocused,
          showSearch: mergedShowSearch,
        }}
      />
    );

我通过 createPortal 在后缀插入其他图标后,改变现有 .ant-select:hover .ant-select-arrow:not(:last-child) {opacity: 0;} 样式我可能需要自行维护 mergedAllowClear 变量,判断hover时是否存在 clear 图标,存在才隐藏。能否将这个变量传递给 arrow 图标,这样包装层可以减少很多代码

https://stackblitz.com/edit/react-x7atw3-ahj1vm

@topazur topazur changed the title Select Arrow Select Arrow Icon Jun 26, 2024
@topazur
Copy link
Author

topazur commented Jun 27, 2024

/* 仅有一个 span 时不隐藏(其实是 mergedAllowClear 等于 false, 即不显示 clear 图标)。但是限制了插入的节点不能span */
.ant-select:hover > span:only-of-type {
  opacity: 1 !important;
}

虽然这样也可以覆盖样式,但是限制了插入的节点不能是 span,或者后续该组件内部添加了额外的 span 节点,就不适用了。

如果可以添加这个样式的话,就不用通过 has、:not(:last-child)、:only-of-type 等局限性的 api 来实现了
https://github.com/ant-design/ant-design/blob/8890eff05e0cb7596a702c51e658682e1757fc67/components/select/style/index.ts#L184

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant