Блог

Здравствуйте, я пытаюсь изменить стиль из .content во время <Spin className="spin"> рендеринга.

Typescript:

 public render() {
        return (
            this.state.isLoading ? (<Spin className="spin" />) : (
                <div>
                    <FormStructure {...this.state.system} />
                </div>
            ));
    }
 

CSS:

 .content-inner {
    display: block;
    align-items: initial;
    justify-content: initial;
}

.spin > content-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}
 

Вы имеете в виду изменить стиль content-inner только в том случае, если дочерний ant-spin элемент существует? Короткий ответ: вы не можете.

Длинный ответ заключается в том, что стили для DOM применяются по порядку, поэтому к тому времени, когда браузер достигает дочернего div, браузер больше не может применять какой-либо стиль к родительскому div.

Добавьте событие в дочерний компонент, которое уведомит родительский компонент о состоянии загрузки.

Родительский компонент:

 <div className={classnames(style.contentInner, this.state.isLoading amp;amp; style.contentInnerLoading)}>
  <Loader
    onChangeLoadingState={(isLoading: boolean) => {
      this.setState({ isLoading })
    }}
  />
</div>