I want to learn how i can create an global or reusable style for the component

[pedromaironi]

• So. i love this library and how u can see, i don't want repeat that styling in each component

                <ReactSearchAutocomplete
                  placeholder="Buscar..."
                  items={people}
                  onSearch={handleOnSearch}
                  onHover={handleOnHover}
                  onSelect={handleOnSelect}
                  onFocus={handleOnFocus}
                  showIcon={false}
                  styling={{
                    padding: "0px 16px",
                    background: "none",
                    outline: "none",
                    border: "none",
                    fontWeight: "500",
                    fontSize: "0.9rem",
                    width: "100%",
                    color: "black",
                    cursor: "text",
                    backgroundColor: "white",
                    borderRadius: "8px",
                    height: "2rem",
                    border: "1px solid #cfd6e4",
                  }}
                />

[sickdyd]

@pedromaironi

You can create an object like this in one of your files:

export const styling = {
    padding: "0px 16px",
    background: "none",
    outline: "none",
    border: "none",
    fontWeight: "500",
    fontSize: "0.9rem",
    width: "100%",
    color: "black",
    cursor: "text",
    backgroundColor: "white",
    borderRadius: "8px",
    height: "2rem",
    border: "1px solid #cfd6e4",
}

Then import it and pass it to the component:

import { styling } from 'path/to/yourfile`

<ReactSearchAutocomplete
  placeholder="Buscar..."
  items={people}
  onSearch={handleOnSearch}
  onHover={handleOnHover}
  onSelect={handleOnSelect}
  onFocus={handleOnFocus}
  showIcon={false}
  styling={styling}
/>

[pedromaironi]

Thank u, sorry for answer too late.