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.