css 未在 React 组件中呈现

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

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

更多信息在此link：

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

css 未在 React 组件中呈现

css not rendering in react component

css

styles

reactjs