React-Autosuggest的SCSS样式不生效问题求助

问题背景 #

我正在将React类组件转换为函数组件，同时用SCSS替换styled-components实现样式。原styled-components版本的react-autosuggest样式显示正常，但改用SCSS后，浏览器元素检查中能看到react-autosuggest相关类名已应用，却无法生效，达不到原版本的显示效果。

原styled-components代码 #

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>
  )
}

改用SCSS后的组件代码 #

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;
    }
  }
}

解决方案 #

1. 修复CSS模块化的选择器匹配问题 #

你使用了className={s.StyledAutoSuggest}，说明开启了CSS模块化，编译后的.StyledAutoSuggest会被转换成带哈希的唯一类名（比如StyledAutoSuggest_xyz123），但SCSS里直接写的.react-autosuggest-*会被模块化处理，导致无法匹配组件上的全局类名。

修改SCSS代码，用:global()包裹react-autosuggest的全局类选择器：

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

  :global(.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;
  }

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

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

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

2. 确认SCSS文件导入正确性 #

确保组件文件中正确导入了SCSS模块，路径和文件名无误：

import s from './YourComponentName.module.scss';

3. 检查样式优先级冲突 #

用浏览器开发者工具查看react-autosuggest元素的样式面板，确认你的SCSS样式是否被其他全局样式覆盖。如果是优先级问题，可以给选择器增加权重，比如：

.StyledAutoSuggest :global(.react-autosuggest__suggestions-container--open) {
  // 保留原有样式，外层模块化类名会提升选择器权重
}

内容的提问来源于stack exchange，提问作者Saif Ali