robbestad/react-iframe

"styles" is not handled properly

Closed this issue · 5 comments

denizdogan commented

Reproduce:

ReactDOM.render(
  <Iframe url='https://www.test-cors.org/'
                  width='100%'
                  height='100%'
                  styles={{ borderWidth: '0' }}
                  position='relative'/>,
  root
)

The result is an iframe with no "border-width" set, with an extra attribute styles="[object Object]"

vanduongit commented

why don't you implement styles properties which you offer? @svenanders

jQwotos commented

One workaround would be to use emotion and style the Iframe component

import styled from 'react-emotion';

const BorderLessIframe = styled(Iframe)`
    border-width: 0;
`;

ReactDOM.render(
    <BorderLessIframe url='https://www.test-cors.org/'
                  width='100%'
                  height='100%'
                  position='relative'/>,
  root
);
  • 👍1
dzienisz commented

I have the same problem

sainijagjit commented

react-emotion library is now changed. Latest working code

import styled from '@emotion/styled';
const BorderLessIframe = styled(Iframe)border-width: 0;;

<BorderLessIframe
url={${window.location.origin}/bial-t2/index.html}
loading="We are fetching maps, please wait"
width="100%"
height="100%"
display="initial"
position="absolute"
/>

robbestad commented

Fixed now thanks to @nagamejun

  • ❤️1