Default Styling For Searchbar Component

[Zuri_Lyons]

Hi -

I am trying to override the default styling for the SearchBar component using customCssClasses. Specifically the input element and the button. I’m trying to remove the rounded corners and adjust the icon. Using rounded-none and border-none does not seem to be working. I was able to do this easily with FilterSearch on another page but for some reason that is not working here. Can you point me to how I can adjust this?

[Zuri_Lyons]

Here’s my code for it if this helps:

[DJ_Corbett]

Hey Zuri,

The <SearchBar> component unfortunately does not currently expose a CSS class that provides control over the border/border radius.

If your goal with the icon is simply to hide it, I’ve used this workaround in the past:

/* Add this to your CSS file */
button[aria-label='Submit Search'] {
  display: none;
}

Best,
DJ

[Tosh_B]

Hello @Zuri_Lyons

Have you checked property “Border-Radius” for class “SearchBar-container”?
That should work for controlling the corners of search box.

[Zuri_Lyons]

Yes I’ve tried this but unfortunately saw no change.

[Tosh_B]

Hi @Zuri_Lyons

Since the “Searchbar” component is using “border rounded-3xl”, the applicable class should be using border-radius: 1.5rem; /* 24px */

border-radius: 24px;

• border-top-left-radius: 24px;
• border-top-right-radius: 24px;
• border-bottom-right-radius: 24px;
• border-bottom-left-radius: 24px;

Just checked by working with the div class SearchBar which is parent div class of SearchBar-container where border-radius: 0px; removed the corners of search box.

It worked.! Will you be able to check the same.?

[Zuri_Lyons]

Thanks! I ended up replacing the SearchBar component with the FilterSearch component which allowed me to better manipulate the styling. I’ll keep this in mind for the future!

[DJ_Corbett]

After experimenting with this a bit, here is the workaround I’m using to override the <SearchBar /> component styling for things like border and border radius:

1. In the customCssClasses prop, give searchBarContainer a non-tailwind class name along with any utility classes you’ve added. For this example, we’ll give it a class name of SearchBar-container:

// search.tsx

<SearchBar
  onSearch={onSearchFunc}
  placeholder="No more rounded edges for me!"
  customCssClasses={{
    searchBarContainer: 'SearchBar-container',
    inputElement: 'py-4',
  }}
/>

2. In your CSS file, use the SearchBar-container class you’ve added to the search bar container to target the search bar itself, which is the descendant of the container div.

   We’ll also add a bit of styling to the nested inner div to ensure everything looks as expected. Here is an example which adjusts the border radius of the search bar:

/* styles.css */

.SearchBar-container > div {
  border-radius: 2px;
}

.SearchBar-container > div > div:first-child {
  height: 100%;
}

Voila! My search bar is nice and pointy (ignore the peculiar recent searches):

Hope this is helpful!
DJ