Inline CSS Styling with Widgets?

I’m using Angular 8/Algolia 3.35.1.

I’ve tried to add styling to AIS widgets, but nothing works. My component.html, shown below, has a couple ways that I have tried without success.

Is it possible to use inline css styling with widgets?

Thanks,
Bob

component.html

    <ais-instantsearch [config]="config">
        <ais-search-box placeholder="Let's find something on TMD..."></ais-search-box> <!-- Could not find a way to override .ais-SearchBox-input style -->

        <ais-hits>
            <ng-template let-hits="hits" let-results="results">
                <div *ngIf="hits.length === 0">
                    No results found matching <strong>{{results.query}}</strong>.
                </div>
                    
                <div *ngIf="results.query">
                    <div *ngFor="let hit of hits" class="content">
                        <section>
                            <h3>{{hit.feature}} Results</h3>

                            <div style="font-size: 14px;"> 
                              <ais-highlight attribute="descriptions" [hit]="hit"></ais-highlight>
                            </div>
                            <br>
                            <ais-highlight attribute="webpages" [hit]="hit" style="font-size: 14px;"></ais-highlight>
                            <br>
                            <ais-highlight attribute="documents" [hit]="hit"></ais-highlight>
                            
                        </section>
                    </div>
                </div>
            </ng-template>
        </ais-hits>
        <!--  -->
    </ais-instantsearch>

Hi @engineering, you can override the css styles produced by the widgets in your css styles. See this codesandbox styles.css file.

Hi Cindy,

The sandbox is helpful - thanks.

Can you explain, the sandbox’s app.component.css file’s behavior? When you make changes to the .searchbox class, those changes do not get reflected on the webpage? For example, I added font-size: 48px; (a big change; I also made smaller changes) and the searchbox stays the same.

Thanks,
Bob

@engineering You might want to reach out to a front end developer for help with setting up your styling and finding the best CSS classes to use, you want to make sure your CSS rules are not being overridden and are properly targeting the elements you want to change

We have a guide here you might find handy as well: https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/angular/#style-your-widgets

For reference here is an example where I have set the text size of the search input to 48px: https://codesandbox.io/s/change-font-size-gui7r?file=/src/styles.css:293-341

Hi Matthew,

I appreciate the suggestion and info. Styling is an area I struggle with, especially when it comes to working with 3rd party widgets. I hadn’t thought about putting the override in styles.css, I was thinking that placing it in app.component.css would’ve been the correct location. Now I know.

Thanks,
Bob