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

Question

我有 ViewAllGraphs class:

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 文件导入图表 class？

Answer 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>

Answer 2

要在功能上设置组件样式，我希望这也适用于 Class 组件，对于文件顶部的样式部分，我将样式作为组件导入，如下所示,

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

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

因此，无论您制作的组件的名称是什么，无论是功能组件还是 class 组件，请根据该名称命名您的 CSS 文件，然后在其后缀添加 .module.css.

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

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

现在，在组件的渲染部分，只要我想将 Graphs.module.css 中的 class 应用到我拥有的组件中的 HTML 组件，我只需写下，

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

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

.classNameFromTheStylesFile {
    background-color: blue;
};

希望我答对了问题。

干杯！

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

How to include styles in React create portal

javascript

css

dom-events

reactjs