No example provided on how to use customCssClasses for the <SearchBar/> component

[evleen13]

Hi,

I want to customise the SearchBar. But there is no documentation on what should be the object to be passed on to the customCssClasses prop. For e.g. I want to hide the yext icon. How can I do that?

TIA.

[anthonyqcshs]

@evleen13 Did you ever find a proper solution to this? Running into the same issue and the yext documentation and available custom css classnames for the searchbar seem substandard in this regard.

[baigel1]

Hey @evleen13 and @anthonyqcshs,

Thanks for the feedback! Here is the Github documentation regarding the SearchBar component's CustomCSSClasses property.

Here's an example of how it is used:
<SearchBar customCssClasses={{ searchBarContainer: "p-8", inputElement: "text-xl", }} />

As far as removing the Yext logo goes, we have permanently removed it from the SearchBar component as of version 1.3 of search-ui-react.

I agree that it would be nice to host this information in some external documentation rather than just on the Github repo, so let me bring this up with the team and see what we can do!