不适用于反应组件的样式

用户3594118

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

页面上只显示消息而不是样式。我尝试将它直接添加到 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;
  }
}

雷切尔·尼古拉斯

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

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

然后作为常规课程申请：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。