javascriptreactjsjsxbaseweb

Changing BaseWeb's Select TriangleDownIcon to another BaseWeb Icon


Does anyone know of a way to replace the BaseWeb Select component's default TriangleDownIcon with another BaseWeb icon? (Our designers have asked to swap the triangle icon with a chevron.). I've looked through BaseWeb's Select documentation and, while I can see how to style the icon through overrides, I can't find how to swap the icon for another.

<Select
    overrides={{
      SelectArrow: {
        style: ({ $theme }) => {
          return {
            outline: `${$theme.colors.warning600} solid`,
            backgroundColor: $theme.colors.warning600,
          };
        },
      },
    }}
  />

Solution

  • For posterity, you can override the Select's default TriangleDownArrow with your own BaseWeb icon by overriding the entire SelectArrow property.

    import ChevronDown from 'baseui/icon/chevron-down';
    
    ...
    
    <Select
        overrides={{
          SelectArrow: () => <ChevronDown />,
        }}
      />