Как оформить div внутри компонента, не передавая реквизиты этому компоненту (я использую пакет)

Question

Я использую пакет response-scrollbar , чтобы отобразить полосу прокрутки для моего контента.Мне также нужна кнопка со стрелкой, которая при щелчке перемещается в определенную область полосы прокрутки. Проблема в , я пытаюсь стилизовать (marginTop) класс внутри моего компонента. Это моя попытка:

// MY COMPONENT

scrollToNextUpload = () => {
    const NextUpload = 400
    this.setState({ marginTop : this.state.marginTop + NextUpload }, () => document.getElementsByClassName('scrollarea-content')[0].style.marginTop = "'" + this.state.marginTop + "px'")
}

// MY RENDER
render () {
    <ScrollArea>
       // my content
       <div onClick={this.scrollToNext}></div>
    </ScrollArea>
}

Что на самом деле отображается

<div class='scrollarea'>
   <div class='scrollarea-content'>
      // my content
      <div onClick={this.scrollToNext}></div>
   </div>
</div>

Что я хочу

Сделатьмоя область с прокруткой полосы прокрутки, я должен добавить стиль marginTop к 'scrollarea-content'.Я мог бы сделать это, передавая реквизиты в , а затем использовать их внутри установленного пакета;но я пытаюсь избежать изменения оригинального содержимого пакета.Кроме того, есть ли другой способ прокрутки по клику, и есть ли кто-то еще, кто имел опыт работы с этим пакетом NPM?

Answer 1

Большинство библиотек предоставляют реквизиты для применения стиля к дочерним компонентам, в этой библиотеке вы можете передать className в contentClassName или использовать встроенный стиль в contentStyle prop:

<ScrollArea contentStyle={{ marginTop: 10 }}>

Другим способом являетсянаписать css для добавления стиля в класс scrollarea-content.

В файле .css:

.scrollarea-content {
  margin-top: 10px;
}

Редактировать: В вашем случае вы можете программно изменить стиль marginTop с помощьюиспользуя реквизиты следующим образом:

scrollToNextUpload = () => {
    const NextUpload = 400;
    this.setState(prevState => ({ marginTop : prevState.marginTop + NextUpload }));
}

render () {
    <ScrollArea contentStyle={{ marginTop: this.state.marginTop }}>
       // my content
       <div onClick={this.scrollToNext}></div>
    </ScrollArea>
}

Обратите внимание на использование функционала setState для предотвращения несоответствий, когда значение следующего состояния зависит от предыдущего состояния.