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

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

0 голосов
/ 06 декабря 2018

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

React Component 

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 # видео локального носителя в реакции?

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

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

Обновление 2

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

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

    <div ref='localMedia' />
  )
}

1 Ответ

0 голосов
/ 06 декабря 2018

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

Таким образом, код должен быть: 

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

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

...