How do I convert the nested CSS using Material-UI's CSS in JS?

Question

I have the following code fo embedding an iframe

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

I am using makeStyles and I want to know how to write rules for

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

I tried the following, but it doesn't work

embedContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "6px solid yellow"
  }

embedContainer iframe: { 
position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

Ryan Cogswell · Accepted Answer · 2020-02-13 21:11:56Z

1

Here's the correct syntax (though not executed, so possibility of minor syntax errors):

const useStyles = makeStyles({
  embedContainer: {
    "& iframe, & object, & embed": {
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%"
    }
  }
});

Collectives™ on Stack Overflow

How do I convert the nested CSS using Material-UI's CSS in JS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related