如何在 React 创建门户中包含 styles

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);

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

let styleConfig = { backgroundColor: 'blue' }

在渲染方法中：

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

Answer 2

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

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

一点建议是，在 99% 的情况下，我想要一种仅适用于该组件的样式。 It's tremendously hard to think of unique class names every single time I make to add styling to a component, so I rename my CSS files with the following format, classComponentName.module.css , or classComponentName.module.scss , if you're using SCSS。

因此，无论您正在制作的组件的名称是什么，无论它是功能性的还是 class 组件，请为此命名您的 CSS 文件，然后使用.module.css

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

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

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

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

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

.classNameFromTheStylesFile {
    background-color: blue;
};

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

干杯!