Стили, не относящиеся к компоненту реакции - PullRequest
Новая
       8

Стили, не относящиеся к компоненту реакции

0 голосов
/ 14 мая 2019

У меня есть компонент для сообщения о загрузке, но как-то стили к нему не применяются.

На странице появляется только сообщение, а не стиль.Я пытался добавить его непосредственно в 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;
  }
}

Ответы [ 2 ]

1 голос
/ 14 мая 2019

Я не так много работаю с Less, как с Sass, но я не думаю, что импорт таблицы стилей как стиля [строка 1], а затем применение как className работает (по крайней мере, он не работает в Sass).

правильный способ импорта стилей будет import './index.less';

, а затем применяется как обычные классы: 

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

Кроме того, не уверен, что :local(.index){ предполагается сделать.Я бы удалил это только для проверки правильности загрузки таблицы стилей.Кроме того, не забудьте протестировать с ложными значениями containerClass и iconClass.

1 голос
/ 14 мая 2019

Вам необходимо импортировать его как Import './index.less' и не передавать стиль в реквизит.Он будет читать из вашего меньшего файла на основе заданных имен классов в ваших элементах.

...