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

您需要将其导入为导入'./index.less' 而不是将风格传递给道具。它将根据元素中给定的类名称从您的less文件中读取内容。

Answer 2

我对Less的使用不如在Sass上进行很多，但我不认为将样式表作为样式[第1行]导入，然后作为className进行应用有效（至少在Sass中不起作用）。

正确的样式导入方式为import { AngularFirePerformanceModule } from '@angular/fire/performance';

然后作为常规类申请：

import './index.less';

此外，不确定return ( <div className={containerClass ? containerClass : 'container'}> <div className={iconClass ? iconClass : 'icon'}> ... );应该做什么。我将删除它只是为了测试样式表是否正确加载。另外，请确保使用containerClass和iconClass的假值进行测试。

样式不适用于react组件

2 个答案: