SCSS not being applied to react-autosuggest

Question

I had a task to convert the react class based to function based and to get rid of styled-components and replace it with scss. Now below is the working styled-component react-autosuggest

const StyledAutoSuggest = styled.div`
  .react-autosuggest__container {
    position: relative;
  }
  .react-autosuggest__suggestions-container {
    display: none;
  }

  .react-autosuggest__suggestions-container--open {
    box-sizing: border-box;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    display: block;
    position: absolute;
    top: 61px;
    left: 0;
    width: 100%;
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    background-color: #ffffff;

    font-size: 18px;
    z-index: 2;
  }

  .react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .react-autosuggest__suggestion {
    cursor: pointer;
    padding: 4px 0 4px 8px;
  }

  .react-autosuggest__suggestion--highlighted {
    background-color: #e20074;
    > div {
      color: #ffffff;
    }
  }
`
  return (
      <StyledAutoSuggest>
        <Autosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={suggestValue}
          renderSuggestion={renderSuggestion}
          onSuggestionSelected={this.props.onSuggestionSelected}
          inputProps={inputProps}
          ref={inputProps.textInputRef}
          renderInputComponent={renderAutoSuggestTextInput}
          focusInputOnSuggestionClick={this.props.focusInputOnSuggestionClick}
          id={this.props.id}
        />
      </StyledAutoSuggest>
    )
  }
}

whereas i created the same with scss like

  return (
    <div className={s.StyledAutoSuggest}>
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
        onSuggestionsClearRequested={onSuggestionsClearRequested}
        getSuggestionValue={suggestValue}
        renderSuggestion={renderSuggestion}
        onSuggestionSelected={props.onSuggestionSelected}
        inputProps={inputProps}
        ref={inputProps.textInputRef}
        renderInputComponent={renderAutoSuggestTextInput}
        focusInputOnSuggestionClick={props.focusInputOnSuggestionClick}
        id={props.id}
      />
    </div>
  )
}

Scss

.StyledAutoSuggest {
  .react-autosuggest__container {
    position: relative;
  }
  .react-autosuggest__suggestions-container {
    display: none;
  }

  .react-autosuggest__suggestions-container--open {
    box-sizing: border-box;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    display: block;
    position: absolute;
    top: 61px;
    left: 0;
    width: 100%;
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    background-color: #ffffff;

    font-size: 18px;
    z-index: 2;
  }

  .react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .react-autosuggest__suggestion {
    cursor: pointer;
    padding: 4px 0 4px 8px;
  }

  .react-autosuggest__suggestion--highlighted {
    background-color: #e20074;
    > div {
      color: #ffffff;
    }
  }
}

but my the desired result is not working showing with scss although when i inspect element i see that the classes are applied eg

see react-autosuggest__suggestions etc is applied no css applied when with the above scss approach

what i want (it works with the above styled-components approach, but i want it with scss too)

Answer 1

Solved it by myself , what i did was change the scss to

    
.StyledAutoSuggest {
  .container {
    position: relative;
  }
  .suggestionsContainer {
    display: none;
  }

  .suggestionsContainerOpen {
    box-sizing: border-box;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    display: block;
    position: absolute;
    top: 61px;
    left: 0;
    width: 100%;
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    background-color: #ffffff;

    font-size: 18px;
    z-index: 2;
  }

  .suggestionsList {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .suggestion {
    cursor: pointer;
    padding: 4px 0 4px 8px;
  }

  .suggestionHighlighted {
    background-color: #e20074;
    > div {
      color: #ffffff;
    }
  }
}

and then in my react autosuggest component i did

<div className={s.StyledAutoSuggest}>
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
        onSuggestionsClearRequested={onSuggestionsClearRequested}
        getSuggestionValue={suggestValue}
        renderSuggestion={renderSuggestion}
        onSuggestionSelected={props.onSuggestionSelected}
        inputProps={inputProps}
        ref={inputProps.textInputRef}
        renderInputComponent={renderAutoSuggestTextInput}
        focusInputOnSuggestionClick={props.focusInputOnSuggestionClick}
        id={props.id}
        theme={s}
      />
    </div>