css not rendering in react component

Question

When i apply the below CSS in App.css they render perfectly, however when I apply the same styles directly in my component (below) the CSS does not render.

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

To get the effect you desire you should do something like this.

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>
            </>
        )
    }

More info at this link:

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