React-bootstrap-typeahead: How to change styling typeahead

[ashanjayasundara]

how can i apply custom css to typeahead

[ericgio]

Hi, questions like this are more appropriate for a forum like StackOverflow since your question will remain open and help others facing the same issue. Posting there also helps keep the issues queue manageable and limited to bugs and feature requests.

https://stackoverflow.com/questions/ask?tags=react-bootstrap-typeahead

Thanks

[brayanL]

Is so difficult to answer the question? I have about one hour searching how to apply style to component Typeahead but I cannot find nothing. Stackoverflow has no information about it.

[ericgio]

Hey @brayanL, I'm sorry you couldn't find the answer you were looking for on StackOverflow. I can see how that would be frustrating. Did you try asking a question so others could help you?

It may or may not be hard for me to answer a question, depending on what it is. It does take time, however, and this is a project I maintain in my spare time. I'm not compensated for the time I spend on it. I'm unable to provide personal support for everyone who uses the library and has questions about it. I do my best to answer when I can, or provide resources like examples and documentation to help a broad set of users, rather than individuals.

Finally, when asking for help, either here, on StackOverflow, or any other forum, I'd encourage you to describe your problem in detail, what you've tried so far, and provide code samples or a sandbox. The OP provided no information about what they were trying to do, making it very difficult to help.

[brayanL]

@ericgio thanks for your effort, I think money is the biggest challenge in open source projects. I'm just trying to add a style to the Typeahead component, but the documentation doesn't mention anything about it. I want to make rounded corners.
The following code works like a charm.

<Typeahead
    disabled={false}
    dropup={false}
    flip={false}
    highlightOnlyResult={false}
    minLength={1}
    id="basic-behaviors-example"
    labelKey="name"
    options={options}
    placeholder="Search"
    aria-label="Search"
    type="text"
    inputProps={{
        style: { borderRadius: '1rem' }
     }}
/>

I hope this helps someone else.