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

更多信息在此链接：

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