javascript - 样式不适用于 react 组件

Question

我有一个用于加载消息的组件，但不知何故样式不适用于它。

页面上仅显示消息，而不显示样式。我尝试将其直接添加到 js 中并使其工作，但当我使用外部样式表时则不然。出了什么问题。

.js 文件:

import style from './index.less';

export default class Loading extends Component {

  render() {
        const {
            loading,
            message,
            iconClass,
            textClass,
            containerClass
        } = this.props;
        return (
            <div className={containerClass || style.container}>
                <div className={iconClass || style.icon}>
                    <div className={loading ? style.loading : null}/>
                </div>
                <div className={textClass || style.text}>
                    <span>{message}</span>
                </div>
            </div>
        );
    }
}

少:

:local(.index){

  .container {
    margin: 0 auto;
    height: 200px;
    width: 300px;
  }

  .icon {
    height: 180px;
    fill: 'Red';
  }

  .text {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.43;
    letter-spacing: 0.6px;
    color: #58585b;
    color: var(--slate-grey);
    text-align: center;
  }

  .loading path:nth-of-type(1) {
    animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
  }

  .loading path:nth-of-type(2) {
    animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
  }
}

Answer 1

我不太像使用 Sass 那样使用 Less，但我不认为将样式表导入为样式 [第 1 行]，然后应用为 className 有效(至少在 Sass 中不起作用)。

导入样式的正确方法是import './index.less';

然后申请常规类(class):

return (
        <div className={containerClass ? containerClass : 'container'}>
            <div className={iconClass ? iconClass : 'icon'}>
               ...
);

此外，不确定 :local(.index){ 应该做什么。我将删除它只是为了测试样式表是否正确加载。另外，请确保使用 containerClass 和 iconClass 的虚假值进行测试。