Проблема может быть вызвана тем, что компонент "Portal" создает отдельный DOM-узел, который не находится внутри родительского компонента, где определены CSS-переменные. Из-за этого класс "content" не может получить доступ к этим переменным.
Чтобы исправить эту проблему, вам нужно передать контекст с CSS-переменными через портал. Для этого вы можете использовать контекст React.
1. Создайте файл "ThemeContext.js" и определите в нем контекст:
```js
import React from 'react';
const ThemeContext = React.createContext();
export default ThemeContext;
```
2. В вашем компоненте, где определены CSS-переменные, оберните его содержимое в провайдер контекста:
```jsx
import React from 'react';
import ThemeContext from './ThemeContext';
class ParentComponent extends React.Component {
render() {
return (
<ThemeContext.Provider value={{}}>
{/* Ваш компонент с CSS-переменными */}
</ThemeContext.Provider>
);
}
}
export default ParentComponent;
```
3. В компоненте "Portal" получите значение CSS-переменных из контекста и передайте его в компонент "content":
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import ThemeContext from './ThemeContext';
class Portal extends React.Component {
render() {
return ReactDOM.createPortal(
<ThemeContext.Consumer>
{theme => (
<div className="modal">
<div className="overlay" />
<div className="content" style={{ background: theme.background }}>
{/* Содержимое компонента "content" */}
</div>
</div>
)}
</ThemeContext.Consumer>,
document.getElementById('portal-root')
);
}
}
export default Portal;
```
Теперь компонент "content" внутри компонента "Portal" сможет получать доступ к CSS-переменным, переданным через контекст.