Autosuggest styles not working with Aphrodite

[Alex de los Santos]

Observed behaviour: Search input styles are not displayed

Expected behaviour: Search input styles should display when using the "theme" prop, just like when having CSS modules

I have an <Autosuggest /> component that I have been using successfully for several years.
The styles of this component I take from a CSS file, so the prop theme has never been necessary.

However, we are migrating the styles throughout our project, using Aphrodite as a library to manage the styles. Therefore, now it is necessary to pass the theme through the props.

In the component inspector (that comes with the React browser extension) the styles appear injected into the component, but the CSS classes don't appear anywhere in the DOM inspector!

Here is the component info:
(I reduced the CSS rules to just 2 for practical purposes)

Here is the code from my functional component:

import { StyleSheet, css } from 'aphrodite';

const SearchInput = (props) => {

    /**
    ... stuff here 
    */
    
    const theme = StyleSheet.create({
        input: {
            borderWidth: 10,
            borderColor: 'red',
        },
    });
    
    return (
        <div id="optionsContainer">
            <div id="autosuggestContainer">
                <Autosuggest
                    theme={[theme, css]}
                    suggestions={suggestions}
                    onSuggestionsFetchRequested={onSuggestionsFetchRequested}
                    onSuggestionsClearRequested={onSuggestionsClearRequested}
                    getSuggestionValue={getSuggestionValue}
                    shouldRenderSuggestions={shouldRenderSuggestions}
                    renderSuggestion={renderSuggestion}
                    renderSuggestionsContainer={renderSuggestionsContainer}
                    onSuggestionSelected={onSuggestionSelected}
                    inputProps={inputProps}
                    highlightFirstSuggestion={true}
                    focusInputOnSuggestionClick={false}
                    multiSection={multipleSections}
                    renderSectionTitle={renderSectionTitle}
                    getSectionSuggestions={getSectionSuggestions}
                />
            </div>
        </div>
    );
    
);

export default SearchInput;

Some of my dependecies on package.json:

"dependencies": {
    "aphrodite": "^2.4.0",
    "autosuggest-highlight": "^3.1.1",
    "react": "^16.13.1",
    "react-autosuggest": "^9.4.3",
    "react-dom": "^16.8.6",
},

Let me know of any other necessary information that I can provide.
If you have any examples of Autosuggest using Aphrodite, please share them.

Our project is very big and we will go into production soon! We have changed dozens of components to use Aphrodite, so we do not expect to use another library to manage styles.