css не рендерится в реактивном компоненте

Question

Когда я применяю приведенные ниже 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>
            </>
        )
    }

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