不适用于反应组件的样式

Question

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

页面上只显示消息，不显示样式。我尝试将它直接添加到 js 中并使其正常工作，但当我使用外部样式 sheet 时却没有。怎么了。

.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' 而不是将风格传递给道具。它将根据元素中给定的 class 名称从 less 文件中读取。

Answer 2

我不像 Sass 那样使用 Less，但我认为将样式表导入为样式 [第 1 行] 然后应用为 className 是行不通的（至少它在 Sass).

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

然后正常申请类:

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

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

不适用于反应组件的样式

Styles not applying to the react component

javascript

less

reactjs