如何在 React 创建门户中包含样式答案

【问题标题】：How to include styles in React create portal如何在 React 创建门户中包含样式
【发布时间】：2021-02-01 10:36:31
【问题描述】：

我有 ViewAllGraphs 类：

import '../styles/Graph.css'
export class ViewAllGraphs extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showWindowPortal: false,
}

和渲染方法：

return (
            <div>
                {
                    this.state.showWindowPortal && (
                        <Graph closeWindowPortal={this.closeWindowPortal} >
                            <h1>Id графика : {this.state.currentId}</h1>
                            <h1>Название графика : {this.state.currentTitle}</h1>
                            <img o src={`data:image/png;base64,${this.state.currentImage}`} />
                            <h1>Данные графика : {this.state.currentData}</h1>
                            <button className="graph-button-close" onClick={() => this.closeWindowPortal()} >
                                Закрыть график
                        </button>
                        </Graph>
                    )
                }
</div>

我的 CSS 文件位于../styles/Graph.css

我想设置我的图形组件的样式，例如按钮。这是该组件的代码：

import React from "react";
import ReactDOM from 'react-dom'
import '../styles/Graph.css'

class Graph extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 0,
        }
        this.containerEl = null;
        this.externalWindow = null;
    }
    componentDidMount() {
        this.externalWindow = window.open('', '');
        this.containerEl = this.externalWindow.document.createElement('div');
        this.externalWindow.document.body.appendChild(this.containerEl);
        this.externalWindow.document.title = 'A React portal window';
        this.externalWindow.addEventListener('beforeunload', () => {
            this.props.closeWindowPortal();
        });

        this.shouldComponentUpdate();
        this.setState({
            id: 1,
        })
    }
    shouldComponentUpdate() {
        return true;
    }

    componentWillUnmount() {
        this.externalWindow.close();
    }

    render() {
        if (!this.containerEl) {
            return null;
        }
        else
            return ReactDOM.createPortal(this.props.children, this.containerEl);
    }
};

export default Graph

我正在尝试包含 CSS 文件并将渲染方法中的 className="graph-button-close" 应用于我的按钮，但它不起作用。为什么我无法将 CSS 文件导入图形类？

【问题讨论】：

试试import './styles/Graph.css'

标签： javascript css reactjs dom-events

【解决方案1】：

你可以试试这些代码：

    this.containerEl = this.externalWindow.document.createElement('div');
    this.containerEl.className = 'image';
    this.containerEl.style.backgroundImage = 'url(http://via.placeholder.com/350x150)';
    // add the image to its container; add both to the body
    // this.containerEl.appendChild(img);
    this.externalWindow.document.body.appendChild(this.containerEl);

或者对于当前元素，您可以在父组件中使用内联样式

let styleConfig = { backgroundColor: 'blue' }

在渲染方法中：

 <p style={styleConfig}>Данные графика : {this.state.currentData}</p>

【讨论】：

【解决方案2】：

为了在功能上设置组件的样式，我希望这也适用于类组件，对于文件顶部的样式部分，我将样式作为组件导入，就像这样，

import componentStyling from '../styles/Graphs.css`;

一点建议是，在 99% 的情况下，我希望一种样式仅适用于该组件。每次我为组件添加样式时，很难想到唯一的类名，所以我用以下格式重命名我的 CSS 文件，classComponentName.module.css 或 classComponentName.module.scss，如果你使用的是 SCSS。

因此，无论您要创建的组件的名称是什么，无论是函数式组件还是类组件，都应根据该名称命名您的 CSS 文件，然后在其后缀上加上 .module.css。

现在，导入看起来像这样，

import componentStyling from `../styles/Graphs.module.css`;

现在，在组件的渲染部分，无论我想将 Graphs.module.css 中的类应用到我拥有的组件中的 HTML 组件的任何位置，我都简单地写，

<htmlElement className={componentStyling.classNameFromTheStylesFile}>
{/* some more JSX here */}
</htmlElement>

其中classNameFromTheStylesFile 是存在于Graphs.module.css 中的类名，例如，

.classNameFromTheStylesFile {
    background-color: blue;
};

我希望我的问题是正确的。

干杯！

【讨论】：