How to apply innerClass style to searchBox in appBase?

Question

I'm using the searchBox component from appbase io for my next js web application, I am not able to customize the layout of the searchbox and the list.

The documentation says, that we have to apply styling as an object, but I am not able to style the component at all.

Here is the image of the docs:

Here is my code to perform the same:

<SearchBase
                index="good-books-ds"
                credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
                url="https://appbase-demo-ansible-abxiydt-arc.searchbase.io"
            >
                <div className={styles['searchbox-controller']}>
                    <SearchBox 
                        id="search-component"
                        className={styles['search-bar-container']}
                        showIcon={false}
                        placeholder={'Search Bloggo'}
                        innerClass={
                            {
                                list:{
                                    opacity:"50%",
                                    fontSize:"25px"
                                }
                            }
                        }

                    />
                </div>
            </SearchBase>

Answer 1

declare style

const { styles } = {
                                list:{
                                    opacity:"50%",
                                    fontSize:"25px"
                                }
                            }

then use in component

<SearchBox 
                        id="search-component"
                        className={styles['search-bar-container']}
                        showIcon={false}
                        placeholder={'Search Bloggo'}
                        innerClass={styles}

                    />