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

Question

Я хочу показать местное видео как подходящее в приложении ReactJS. И пытается ширину как 100%. Но как объявить этот стиль в React?

Реагировать Компонент

componentDidMount() {
  Video.createLocalVideoTrack().then(track => {
     const localMediaContainer = this.refs.localMedia;
     localMediaContainer.appendChild(track.attach());
  });
}

render () {
  return (
      <div ref='localMedia' />
  )
}

Результат:

<div>
  <video autoplay=""></video>
</div>

Элемент видео создается с помощью трека twilio автоматически (container.appenChild). И я хочу определить стиль CSS для этого элемента.

Это работает в HTML/JS:

div#local-media {
      width: 100%;
      height: 220px;          
      margin: 0 auto;

  div#local-media video {
    max-width: 100%;
    max-height: 100%;
    border: none;
  }

В реакции:

const styles = theme => ({
    localMedia: {
        width: '100%',
        height: 220,         
        margin: '0 auto'

    }
});

Как я могу объявить для дочернего элемента div#local-media video в реагировать?

Или есть другое решение для расширения медиа до локального медиа-див?

Обновление 1: элемент, сгенерированный кодом Twilio с appendChild.

Обновление 2

Я думаю, я нашел решение? Работает

render() {
  return (
    <style jsx>{`
      video {
        max-width: 100%;
        max-height: 100%;
      }
    `}
    </style>

    <div ref='localMedia' />
  )
}

Answer 1

Так как вы используете стили и темы, от которых я могу ожидать, что вы используете Material UI в реакции, то вы должны использовать объект classes согласно документации ( https://material-ui.com/customization/themes/).

Так что код должен быть:

<div class={props.classes.localMedia}>
   <video autoplay=""></video>
</div>

Вы можете попробовать сделать это.