sickdyd / react-search-autocomplete

A search box that filters the provided array of objects
https://sickdyd.github.io/react-search-autocomplete
MIT License
216 stars 82 forks source link

Text Align with style property #90

Open parmarravi opened 1 year ago

parmarravi commented 1 year ago

I want to align the text to auto or center but the text default alignment is set to align-self: flex-end; How to change this property with style prop? Screenshot from 2022-11-06 10-37-10 Screenshot from 2022-11-06 10-37-19

Code:


<ReactSearchAutocomplete
                                        items={cityList}
                                        onSearch={searchCityHandler}
                                        onSelect={handleOnSelect}
                                        showIcon={false}
                                        placeholder="City"
                                        autoFocus={false}
                                        formatResult={formatResult}
                                        fuseOptions={{ keys: ["city"] }}
                                        resultStringKeyName="city"
                                        inputSearchString={cityName == null ? "" : cityName}
                                        styling={{
                                            border: `1px solid ${defaultColours.slate40}`,
                                            borderRadius: "8px",
                                            backgroundColor: "white",
                                            boxShadow: "none",
                                            hoverBackgroundColor: `${lighten(0.64, Theme.blue)}`,
                                            color: `${Theme.blue}`,
                                            alignSelf: "auto",
                                            iconColor: `${Theme.blue}`,
                                            lineColor: `${defaultColours.slate50}`,
                                            placeholderColor: `${defaultColours.slate50}`,
                                            clearIconMargin: "3px 8px 0 0",
                                            zIndex: 4,
                                        }}
                                    />