Чтобы стилизовать элемент iframe в React, вы можете использовать различные методы. Вот несколько часто используемых подходов:

1. Встроенные стили. Вы можете применять встроенные стили непосредственно к элементу iframe, используя атрибут style. Например:

   <iframe
   src="..."
   style={{ width: '100%', height: '400px', border: 'none', borderRadius: '5px' }}
   />

   При таком подходе стили определяются с использованием объектов JavaScript в двойных фигурных скобках.

2. Модули CSS. Если вы используете модули CSS в своем проекте React, вы можете создать отдельный файл CSS и импортировать его в свой компонент. Затем вы можете применить стили к iframe, используя имена классов. Например:

   import styles from './Iframe.module.css';
   const IframeComponent = () => {
   return (
   <iframe
     src="..."
     className={styles.iframeContainer}
   />
   );
   };

   При таком подходе стили привязаны к компоненту и могут быть определены в отдельном файле CSS.

3. Библиотеки CSS-in-JS. Для React доступно несколько библиотек CSS-in-JS, таких как стилизованные компоненты, Emotion и модули CSS с TypeScript. Эти библиотеки позволяют вам определять стили непосредственно внутри вашего компонента с помощью JavaScript или TypeScript. Вот пример использования стилевых компонентов:

   import styled from 'styled-components';
   const StyledIframe = styled.iframe`
   width: 100%;
   height: 400px;
   border: none;
   border-radius: 5px;
   `;
   const IframeComponent = () => {
   return <StyledIframe src="..." />;
   };

   При таком подходе вы определяете стилизованный компонент и применяете его к элементу iframe.

Это всего лишь несколько методов стилизации iframe в React. Вы можете выбрать подход, который лучше всего соответствует потребностям вашего проекта.