How to style an iframe in react.js?

@lew 

To style an iframe in React.js, you can use CSS within your component's styling or use inline styles.

1. Using CSS: You can create a CSS file and import it into your React component where you render the iframe. In the CSS file, you can target the iframe tag using its tag name or class name (if you add a class attribute to the iframe element) and apply any styles you want. For example:

In your CSS file:

1
2
3
4
5

iframe {
  width: 100%;
  height: 400px;
  border: 1px solid black;
}

In your React component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';
import './iframeStyles.css'

const MyComponent = () => {
  return (
    <div>
      <iframe src="https://www.example.com" title="example"></iframe>
    </div>
  );
}

export default MyComponent;

1. Using inline styles: You can also add inline styles directly to the iframe element in your React component. This can be done by using the style attribute and passing an object with the styles you want to apply. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import React from 'react';

const MyComponent = () => {
  const iframeStyles = {
    width: '100%',
    height: '400px',
    border: '1px solid black'
  };

  return (
    <div>
      <iframe src="https://www.example.com" title="example" style={iframeStyles}></iframe>
    </div>
  );
}

export default MyComponent;

By using either of these methods, you can easily style the iframe in your React component according to your preferences.