Как из родителя менять стиль для одного из элементов стороннего компонента?

Question

У меня есть библиотека стороннего разработчика, которая отдает компонент Table, состоящий из нескольких элементов. Высота одного из внутренних элементов, назовем его <div class='toChange'> из Table меня не устраивает. Я ее хочу задавать динамически из this.state.height. Можно ли как-то из родительского компонента MyComponent динамически менять высоту у <div class='toChange'>?

import { Table } from "someLibrary";

export default class MyComponent extends Component {
  ...
  render() {
    const y = this.state.height
    return <div>
      <Table />
    </div>
  }
}

Answer 1

Можно в несколько способов

Ребенок должен "ловить" style и присваивать их на правильную DOM ветку
Ребенок должен "ловить" className и где-то должен быть css, sass, scss файл который будет импортироваться со стилями для заданного класса
Можно использовать styled-components которые хорошо работают с переданным className и в конечном результате комбинируют переданный класс с тем который они генерируют

Все три примера есть по ссылки ниже

Ссылка на пример на codesandbox

Примечание: если автор библиотеки не принимает style или className пропс, то у шансы на изменения стиля элемента у вас очень низки. Чтобы узнать точно вам нужно пойти в исходный код этой компоненты и посмотреть какие пропсы она принимает

UPDATE

class MyComponent {
  state = {
    height: 0,
  }

  setHeight = (height) => {
    this.setState({ height }, () => {
      // функция вызовется после обновления состояния

      // ловим DOM ветку где надо изменить стили
      const element = document.querySelector('targetClassName');

      // меняем стили только если она существует в DOM структуре
      if (element) element.style.height = `${height}px`;
    })
  }


  render() { ... }
}

БЛОГ НА HUSL

Как из родителя менять стиль для одного из элементов стороннего компонента?

Ответы (1 шт):