css - CSS未在反应组件中呈现

Question

当我在 App.css 中应用下面的 CSS 时，它们会完美呈现，但是当我直接在我的组件（下）中应用相同的样式时，CSS 不会呈现。

const getStyles = () => {
        const BLACK = "#000000";
        const VW = "vw";
        const VH = "vh";
        const REM = "rem";

        return {
             editor: {
                 width: `70${VW}`,
                 height: `50${VH}`,
                 margin: `2${REM}`,
                 padding: `1${REM}`,
                 fontSize: `1.2${REM}`,
                 boxShadow: `0 .1${REM} .4rem ${BLACK}`,
                 border: `1px solid ${BLACK}`,
                 overflowY: `auto`
             }
        };
    };

    const styles = getStyles();

        return (
            <>
                <div className="center">
                   <div className={styles.editor} contentEditable={true} suppressContentEditableWarning={true}>
                       <h1>{introText}</h1>
                       <p>{subText}</p>
                   </div>
                </div>
            </>
        )
    }

标签： cssreactjsstyles

Answer 1

为了得到你想要的效果，你应该做这样的事情。

const getStyles = () => {
        const BLACK = "#000000";
        const VW = "vw";
        const VH = "vh";
        const REM = "rem";

        return {
                 width: `70${VW}`,
                 height: `50${VH}`,
                 margin: `2${REM}`,
                 padding: `1${REM}`,
                 fontSize: `1.2${REM}`,
                 boxShadow: `0 .1${REM} .4rem ${BLACK}`,
                 border: `1px solid ${BLACK}`,
                 overflowY: `auto`
        };
    };

    const styles = getStyles();

        return (
            <>
                <div className="center">
                   <div style={styles.editor} contentEditable={true} suppressContentEditableWarning={true}>
                       <h1>{introText}</h1>
                       <p>{subText}</p>
                   </div>
                </div>
            </>
        )
    }

此链接的更多信息：

https://reactjs.org/docs/dom-elements.html#style