Allow custom CSS styles on Typeahead component

src/Blazored.Typeahead/BlazoredTypeahead.razor

@@ -3,7 +3,7 @@
 @typeparam TItem
 @typeparam TValue
 
-<div class="blazored-typeahead @FieldCssClasses">
+<div class="blazored-typeahead @_classAttribute @FieldCssClasses" style="@_styleAttribute">
 
     <div class="blazored-typeahead__controls">
 
@@ -82,7 +82,7 @@
                            @onkeyup:preventDefault="@PreventDefault"
                            @onfocus="HandleInputFocus"
                            autocomplete="off"
-                           @attributes="AdditionalAttributes"
+                           @attributes="_capturedAttributes"
                            type="text"
                            class="blazored-typeahead__input blazored-typeahead__input-multi" />
                 </div>
@@ -112,7 +112,7 @@
                        @onkeyup:preventDefault="@PreventDefault"
                        @onfocus="HandleInputFocus"
                        autocomplete="off"
-                       @attributes="AdditionalAttributes"
+                       @attributes="_capturedAttributes"
                        type="text"
                        class="blazored-typeahead__input @(IsShowingMask ? "blazored-typeahead__input-hidden" : null)" />
             }

src/Blazored.Typeahead/BlazoredTypeahead.razor.cs

@@ -16,6 +16,9 @@ public partial class BlazoredTypeahead<TItem, TValue> : ComponentBase, IDisposab
         private bool _eventsHookedUp = false;
         private ElementReference _searchInput;
         private ElementReference _mask;
+        private IReadOnlyDictionary<string, object>? _capturedAttributes;
+        private string _classAttribute = string.Empty;
+        private string _styleAttribute = string.Empty;
 
         [Inject] private IJSRuntime JSRuntime { get; set; }
 
@@ -40,7 +43,7 @@ public partial class BlazoredTypeahead<TItem, TValue> : ComponentBase, IDisposab
         [Parameter] public RenderFragment HeaderTemplate { get; set; }
         [Parameter] public RenderFragment FooterTemplate { get; set; }
 
-        [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }
+        [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
         [Parameter] public int MinimumLength { get; set; } = 1;
         [Parameter] public int Debounce { get; set; } = 300;
         [Parameter] public int MaximumSuggestions { get; set; } = 10;
@@ -108,6 +111,8 @@ protected override void OnInitialized()
                 throw new InvalidOperationException($"{GetType()} requires a {nameof(ResultTemplate)} parameter.");
             }
 
+            _capturedAttributes = CaptureCssAttributes(AdditionalAttributes);
+
             _debounceTimer = new System.Timers.Timer();
             _debounceTimer.Interval = Debounce;
             _debounceTimer.AutoReset = false;
@@ -140,6 +145,27 @@ private void Initialize()
             IsShowingMask = Value != null;
         }
 
+        private IReadOnlyDictionary<string, object>? CaptureCssAttributes(IReadOnlyDictionary<string, object>? additionalAttributes)
+        {
+            if (additionalAttributes == null)
+            {
+                return null;
+            }
+
+            var capturedAttributes = additionalAttributes.ToDictionary(k => k.Key, v => v.Value);
+            if (capturedAttributes.ContainsKey("class"))
+            {
+                _classAttribute = Convert.ToString(capturedAttributes["class"]) ?? string.Empty;
+                capturedAttributes.Remove("class");
+            }
+            if (capturedAttributes.ContainsKey("style"))
+            {
+                _styleAttribute = Convert.ToString(capturedAttributes["style"]) ?? string.Empty;
+                capturedAttributes.Remove("style");
+            }
+            return capturedAttributes;
+        }
+
         private async Task RemoveValue(TValue item)
         {
             var valueList = Values ?? new List<TValue>();

src/Blazored.Typeahead/wwwroot/blazored-typeahead.css

@@ -27,6 +27,8 @@
     border: none;
     padding: .5rem;
     border-radius: 5px;
+    color: inherit;
+    background-color: inherit;
 }
 
 .blazored-typeahead:focus-within {