[Feature Request] Allow adding css styles to various parts of component

First of all: Thank you for this great component. It saved me a lot of work! I am not so experienced with CSS and SCSS but can survive. So I ran into a situation where I need help.

Is your feature request related to a problem? Please describe. I am using the AdminLTE Styling template for a Blazored Application with many pages and of course
blazored.typeahead. The Problem is, typehead styling does not fit with AdminLTE. Positioning the search filed seems to not an easy one, especially the height of input field. Even more, if it comes to media targeted design thing get complicated. However, I don’t want to rework all styles and copy paste the ones from bootstrap or AdminLTE into typeahead stale sheet.

Describe the solution you’d like It would be great have a possibility to add css classes to the elements in typeahead component through parameters or break apart the component into child components like in blazored menu.

Describe alternatives you’ve considered I tried to overcome the styling issue using scss @extend and @mixin but that did not work. At the end I cloned the project and added the classes I need. This seems to be not an ultimate solution, because I suspect I loose future enhancements of the component.

Additional context Code snippet what I have done:

@typeparm TItem
@typeparam TValue
<div class="blazored-typeahead @FieldCssClasses">

    <div class="blazored-typeahead__controls form-control form-control-sm">

        @if (Disabled)
        {

There are more such things like the shadow around the input field and the way focus is styled.

[vertonghenb]

A workaround:

Add the styling directly to the predefined css classes.

Solution

We can simply add a Class parameter and add the classes to the list of css classes in the control. The user is then responsible for the overwrite.

[digitalsigi]

Sounds good. I think, if one wants to change it, it should be possible. I experienced already, that this is not easy doing and requires good knowledge of css. @Workaround: Did not work for me, because I am using the scss templates bootstrap and AdminLTE (yes, I know, not Javascript free) and their responsive design. It was easier to fork the project and change the code.