CSS未在反应组件中呈现答案

【问题标题】：css not rendering in react componentCSS未在反应组件中呈现
【发布时间】：2020-03-25 00:06:38
【问题描述】：

当我在 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>
            </>
        )
    }

【问题讨论】：

标签： css reactjs styles

【解决方案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>
            </>
        )
    }

【讨论】：