How to define and assign child element style in ReactJS?

Question

I want to show local video as fit in ReactJS App. And trying to width as 100%. But how to declare this style in React?

React Component

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

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

The Result:

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

The video element is created by twilio track automatically (container.appenChild). And I want to define css style for this element.

This works in HTML/JS:

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

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

In React:

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

    }
});

How can I declare for child element, div#local-media video in react?

Or is there another solution to stretch media to local-media div?

Update 1: element generated by Twilio code with appendChild..

Update 2

I guess I found a solution? It's working

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

    <div ref='localMedia' />
  )
}

have you tried doing this `const styleVideo={width:'100%'}` and then adding this style to your video html `` — Inderjeet Singh, Dec 06 '18 at 11:01
can you create a demo for that> https://codesandbox.io/s/new — Sultan H., Dec 06 '18 at 11:29
I'd like to create but Twilio Video api need to API ID, SID etc... I cant post these number on that place. :( — RedLEON, Dec 06 '18 at 11:41

score 0 · Answer 1 · answered Dec 06 '18 at 11:07

0

Since you are using styles and themes, from which I can expect you are using Material UI in react , then you should use the object classes as per the documentation (https://material-ui.com/customization/themes/).

So the code should be :

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

you can try doing this.

answered Dec 06 '18 at 11:07

Ashwamegh

168
8

Yes I'm using MateriaUI. localMedia style is working for div element but not the child element, video. – RedLEON Dec 06 '18 at 11:21

How to define and assign child element style in ReactJS?

1 Answers1