How to I edit a style inside an iframe using React?

Question

I need to render an iframe inside a react component but want to hide an element inside it. The iframe's domain is external though.

Is there any way I can inject in custom CSS in the iframe and do what I need?

Here is my component:

import React from 'react'

const ExampleComponent = () => {
  return ( <>
    <iframe src="https://app.sli.do/event/6ouwoyzr"></iframe>
  </> );
}
 
export default ExampleComponent;

And the css I want to inject:

app-header {
    display: none;
}

Answer 1

U should jsx . U can give **className** attribiute inside iframe tag and u can write some jsx code inside of it or u can create class and give it in className . For example:

style.css:

.Burger{
width:100px;
height:100px
}

reactfile:

import classesfrom 'your.css.file.path.css';

<iframe className={classes.Burger}>

Also u can checkout this link for other way to push into our component styling: https://material-ui.com/styles/basics/