Question

我想在ReactJS App中显示适合的本地视频。并尝试将宽度设为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 track自动创建的（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;
  }

在React中：

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

    }
});

如何在反应中声明子元素 div＃local-media video ？

还是有另一种解决方案将媒体扩展到本地媒体div？

更新1： Twilio代码使用appendChild生成的元素。

更新2

我想我找到了解决方案？工作正常

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

    <div ref='localMedia' />
  )
}

Answer 1

由于您正在使用样式和主题，因此可以期望您在react中使用Material UI，因此应根据文档（https://material-ui.com/customization/themes/）使用对象classes。

所以代码应该是：

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

您可以尝试这样做。

如何在ReactJS中定义和分配子元素样式？

1 个答案: