我正在处理打字稿，并尝试编写一个从DOM元素中获取样式对象并将其作为样式属性传递到新的JSX元素的模块。
类似这样的东西：
<div style={domElement.style} />
[执行此操作时，我遇到打字错误：
Type 'CSSStyleDeclaration' is not assignable to type 'CSSProperties'.
Types of property 'backfaceVisibility' are incompatible.
Type 'string' is not assignable to type '"hidden" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "visible" | undefined'.
这是domElement.style的样子：
cssText: "border: 0px; width: 100%; height: 120px;"
length: 19
parentRule: null
cssFloat: ""
0: "border-top-width"
1: "border-right-width"
2: "border-bottom-width"
3: "border-left-width"
4: "border-top-style"
5: "border-right-style"
6: "border-bottom-style"
7: "border-left-style"
8: "border-top-color"
9: "border-right-color"
10: "border-bottom-color"
11: "border-left-color"
12: "border-image-source"
13: "border-image-slice"
14: "border-image-width"
15: "border-image-outset"
16: "border-image-repeat"
17: "width"
18: "height"
alignContent: ""
alignItems: ""
alignSelf: ""
alignmentBaseline: ""
all: ""
animation: ""
animationDelay: ""
animationDirection: ""
animationDuration: ""
animationFillMode: ""
animationIterationCount: ""
animationName: ""
animationPlayState: ""
animationTimingFunction: ""
backdropFilter: ""
backfaceVisibility: ""
background: ""
backgroundAttachment: ""
backgroundBlendMode: ""
backgroundClip: ""
backgroundColor: ""
backgroundImage: ""
backgroundOrigin: ""
backgroundPosition: ""
backgroundPositionX: ""
backgroundPositionY: ""
backgroundRepeat: ""
backgroundRepeatX: ""
backgroundRepeatY: ""
backgroundSize: ""
baselineShift: ""
blockSize: ""
border: "0px"
borderBlockEnd: ""
borderBlockEndColor: ""
borderBlockEndStyle: ""
borderBlockEndWidth: ""
borderBlockStart: ""
borderBlockStartColor: ""
borderBlockStartStyle: ""
borderBlockStartWidth: ""
borderBottom: "0px"
borderBottomColor: "initial"
borderBottomLeftRadius: ""
borderBottomRightRadius: ""
borderBottomStyle: "initial"
borderBottomWidth: "0px"
borderCollapse: ""
borderColor: "initial"
borderImage: "initial"
borderImageOutset: "initial"
borderImageRepeat: "initial"
borderImageSlice: "initial"
borderImageSource: "initial"
borderImageWidth: "initial"
borderInlineEnd: ""
borderInlineEndColor: ""
borderInlineEndStyle: ""
borderInlineEndWidth: ""
borderInlineStart: ""
borderInlineStartColor: ""
borderInlineStartStyle: ""
borderInlineStartWidth: ""
borderLeft: "0px"
borderLeftColor: "initial"
borderLeftStyle: "initial"
borderLeftWidth: "0px"
borderRadius: ""
borderRight: "0px"
borderRightColor: "initial"
borderRightStyle: "initial"
borderRightWidth: "0px"
borderSpacing: ""
borderStyle: "initial"
borderTop: "0px"
borderTopColor: "initial"
borderTopLeftRadius: ""
borderTopRightRadius: ""
borderTopStyle: "initial"
borderTopWidth: "0px"
borderWidth: "0px"
bottom: ""
boxShadow: ""
boxSizing: ""
breakAfter: ""
breakBefore: ""
breakInside: ""
bufferedRendering: ""
captionSide: ""
caretColor: ""
clear: ""
clip: ""
clipPath: ""
clipRule: ""
color: ""
colorInterpolation: ""
colorInterpolationFilters: ""
colorRendering: ""
columnCount: ""
columnFill: ""
columnGap: ""
columnRule: ""
columnRuleColor: ""
columnRuleStyle: ""
columnRuleWidth: ""
columnSpan: ""
columnWidth: ""
columns: ""
contain: ""
content: ""
counterIncrement: ""
counterReset: ""
cursor: ""
cx: ""
cy: ""
d: ""
direction: ""
display: ""
dominantBaseline: ""
emptyCells: ""
fill: ""
fillOpacity: ""
fillRule: ""
filter: ""
flex: ""
flexBasis: ""
flexDirection: ""
flexFlow: ""
flexGrow: ""
flexShrink: ""
flexWrap: ""
float: ""
floodColor: ""
floodOpacity: ""
font: ""
fontDisplay: ""
fontFamily: ""
fontFeatureSettings: ""
fontKerning: ""
fontOpticalSizing: ""
fontSize: ""
fontStretch: ""
fontStyle: ""
fontVariant: ""
fontVariantCaps: ""
fontVariantEastAsian: ""
fontVariantLigatures: ""
fontVariantNumeric: ""
fontVariationSettings: ""
fontWeight: ""
gap: ""
grid: ""
gridArea: ""
gridAutoColumns: ""
gridAutoFlow: ""
gridAutoRows: ""
gridColumn: ""
gridColumnEnd: ""
gridColumnGap: ""
gridColumnStart: ""
gridGap: ""
gridRow: ""
gridRowEnd: ""
gridRowGap: ""
gridRowStart: ""
gridTemplate: ""
gridTemplateAreas: ""
gridTemplateColumns: ""
gridTemplateRows: ""
height: "120px"
hyphens: ""
imageRendering: ""
inlineSize: ""
isolation: ""
justifyContent: ""
justifyItems: ""
justifySelf: ""
left: ""
letterSpacing: ""
lightingColor: ""
lineBreak: ""
lineHeight: ""
listStyle: ""
listStyleImage: ""
listStylePosition: ""
listStyleType: ""
margin: ""
marginBlockEnd: ""
marginBlockStart: ""
marginBottom: ""
marginInlineEnd: ""
marginInlineStart: ""
marginLeft: ""
marginRight: ""
marginTop: ""
marker: ""
markerEnd: ""
markerMid: ""
markerStart: ""
mask: ""
maskType: ""
maxBlockSize: ""
maxHeight: ""
maxInlineSize: ""
maxWidth: ""
maxZoom: ""
minBlockSize: ""
minHeight: ""
minInlineSize: ""
minWidth: ""
minZoom: ""
mixBlendMode: ""
objectFit: ""
objectPosition: ""
offset: ""
offsetDistance: ""
offsetPath: ""
offsetRotate: ""
opacity: ""
order: ""
orientation: ""
orphans: ""
outline: ""
outlineColor: ""
outlineOffset: ""
outlineStyle: ""
outlineWidth: ""
overflow: ""
overflowAnchor: ""
overflowWrap: ""
overflowX: ""
overflowY: ""
overscrollBehavior: ""
overscrollBehaviorBlock: ""
overscrollBehaviorInline: ""
overscrollBehaviorX: ""
overscrollBehaviorY: ""
padding: ""
paddingBlockEnd: ""
paddingBlockStart: ""
paddingBottom: ""
paddingInlineEnd: ""
paddingInlineStart: ""
paddingLeft: ""
paddingRight: ""
paddingTop: ""
page: ""
pageBreakAfter: ""
pageBreakBefore: ""
pageBreakInside: ""
paintOrder: ""
perspective: ""
perspectiveOrigin: ""
placeContent: ""
placeItems: ""
placeSelf: ""
pointerEvents: ""
position: ""
quotes: ""
r: ""
resize: ""
right: ""
rowGap: ""
rx: ""
ry: ""
scrollBehavior: ""
scrollMargin: ""
scrollMarginBlock: ""
scrollMarginBlockEnd: ""
scrollMarginBlockStart: ""
scrollMarginBottom: ""
scrollMarginInline: ""
scrollMarginInlineEnd: ""
scrollMarginInlineStart: ""
scrollMarginLeft: ""
scrollMarginRight: ""
scrollMarginTop: ""
scrollPadding: ""
scrollPaddingBlock: ""
scrollPaddingBlockEnd: ""
scrollPaddingBlockStart: ""
scrollPaddingBottom: ""
scrollPaddingInline: ""
scrollPaddingInlineEnd: ""
scrollPaddingInlineStart: ""
scrollPaddingLeft: ""
scrollPaddingRight: ""
scrollPaddingTop: ""
scrollSnapAlign: ""
scrollSnapStop: ""
scrollSnapType: ""
shapeImageThreshold: ""
shapeMargin: ""
shapeOutside: ""
shapeRendering: ""
size: ""
speak: ""
src: ""
stopColor: ""
stopOpacity: ""
stroke: ""
strokeDasharray: ""
strokeDashoffset: ""
strokeLinecap: ""
strokeLinejoin: ""
strokeMiterlimit: ""
strokeOpacity: ""
strokeWidth: ""
tabSize: ""
tableLayout: ""
textAlign: ""
textAlignLast: ""
textAnchor: ""
textCombineUpright: ""
textDecoration: ""
textDecorationColor: ""
textDecorationLine: ""
textDecorationSkipInk: ""
textDecorationStyle: ""
textIndent: ""
textOrientation: ""
textOverflow: ""
textRendering: ""
textShadow: ""
textSizeAdjust: ""
textTransform: ""
textUnderlinePosition: ""
top: ""
touchAction: ""
transform: ""
transformBox: ""
transformOrigin: ""
transformStyle: ""
transition: ""
transitionDelay: ""
transitionDuration: ""
transitionProperty: ""
transitionTimingFunction: ""
unicodeBidi: ""
unicodeRange: ""
userSelect: ""
userZoom: ""
vectorEffect: ""
verticalAlign: ""
visibility: ""
webkitAlignContent: ""
webkitAlignItems: ""
webkitAlignSelf: ""
webkitAnimation: ""
webkitAnimationDelay: ""
webkitAnimationDirection: ""
webkitAnimationDuration: ""
webkitAnimationFillMode: ""
webkitAnimationIterationCount: ""
webkitAnimationName: ""
webkitAnimationPlayState: ""
webkitAnimationTimingFunction: ""
webkitAppRegion: ""
webkitAppearance: ""
webkitBackfaceVisibility: ""
webkitBackgroundClip: ""
webkitBackgroundOrigin: ""
webkitBackgroundSize: ""
webkitBorderAfter: ""
webkitBorderAfterColor: ""
webkitBorderAfterStyle: ""
webkitBorderAfterWidth: ""
webkitBorderBefore: ""
webkitBorderBeforeColor: ""
webkitBorderBeforeStyle: ""
webkitBorderBeforeWidth: ""
webkitBorderBottomLeftRadius: ""
webkitBorderBottomRightRadius: ""
webkitBorderEnd: ""
webkitBorderEndColor: ""
webkitBorderEndStyle: ""
webkitBorderEndWidth: ""
webkitBorderHorizontalSpacing: ""
webkitBorderImage: ""
webkitBorderRadius: ""
webkitBorderStart: ""
webkitBorderStartColor: ""
webkitBorderStartStyle: ""
webkitBorderStartWidth: ""
webkitBorderTopLeftRadius: ""
webkitBorderTopRightRadius: ""
webkitBorderVerticalSpacing: ""
webkitBoxAlign: ""
webkitBoxDecorationBreak: ""
webkitBoxDirection: ""
webkitBoxFlex: ""
webkitBoxOrdinalGroup: ""
webkitBoxOrient: ""
webkitBoxPack: ""
webkitBoxReflect: ""
webkitBoxShadow: ""
webkitBoxSizing: ""
webkitClipPath: ""
webkitColumnBreakAfter: ""
webkitColumnBreakBefore: ""
webkitColumnBreakInside: ""
webkitColumnCount: ""
webkitColumnGap: ""
webkitColumnRule: ""
webkitColumnRuleColor: ""
webkitColumnRuleStyle: ""
webkitColumnRuleWidth: ""
webkitColumnSpan: ""
webkitColumnWidth: ""
webkitColumns: ""
webkitFilter: ""
webkitFlex: ""
webkitFlexBasis: ""
webkitFlexDirection: ""
webkitFlexFlow: ""
webkitFlexGrow: ""
webkitFlexShrink: ""
webkitFlexWrap: ""
webkitFontFeatureSettings: ""
webkitFontSizeDelta: ""
webkitFontSmoothing: ""
webkitHighlight: ""
webkitHyphenateCharacter: ""
webkitJustifyContent: ""
webkitLineBreak: ""
webkitLineClamp: ""
webkitLocale: ""
webkitLogicalHeight: ""
webkitLogicalWidth: ""
webkitMarginAfter: ""
webkitMarginAfterCollapse: ""
webkitMarginBefore: ""
webkitMarginBeforeCollapse: ""
webkitMarginBottomCollapse: ""
webkitMarginCollapse: ""
webkitMarginEnd: ""
webkitMarginStart: ""
webkitMarginTopCollapse: ""
webkitMask: ""
webkitMaskBoxImage: ""
webkitMaskBoxImageOutset: ""
webkitMaskBoxImageRepeat: ""
webkitMaskBoxImageSlice: ""
webkitMaskBoxImageSource: ""
webkitMaskBoxImageWidth: ""
webkitMaskClip: ""
webkitMaskComposite: ""
webkitMaskImage: ""
webkitMaskOrigin: ""
webkitMaskPosition: ""
webkitMaskPositionX: ""
webkitMaskPositionY: ""
webkitMaskRepeat: ""
webkitMaskRepeatX: ""
webkitMaskRepeatY: ""
webkitMaskSize: ""
webkitMaxLogicalHeight: ""
webkitMaxLogicalWidth: ""
webkitMinLogicalHeight: ""
webkitMinLogicalWidth: ""
webkitOpacity: ""
webkitOrder: ""
webkitPaddingAfter: ""
webkitPaddingBefore: ""
webkitPaddingEnd: ""
webkitPaddingStart: ""
webkitPerspective: ""
webkitPerspectiveOrigin: ""
webkitPerspectiveOriginX: ""
webkitPerspectiveOriginY: ""
webkitPrintColorAdjust: ""
webkitRtlOrdering: ""
webkitRubyPosition: ""
webkitShapeImageThreshold: ""
webkitShapeMargin: ""
webkitShapeOutside: ""
webkitTapHighlightColor: ""
webkitTextCombine: ""
webkitTextDecorationsInEffect: ""
webkitTextEmphasis: ""
webkitTextEmphasisColor: ""
webkitTextEmphasisPosition: ""
webkitTextEmphasisStyle: ""
webkitTextFillColor: ""
webkitTextOrientation: ""
webkitTextSecurity: ""
webkitTextSizeAdjust: ""
webkitTextStroke: ""
webkitTextStrokeColor: ""
webkitTextStrokeWidth: ""
webkitTransform: ""
webkitTransformOrigin: ""
webkitTransformOriginX: ""
webkitTransformOriginY: ""
webkitTransformOriginZ: ""
webkitTransformStyle: ""
webkitTransition: ""
webkitTransitionDelay: ""
webkitTransitionDuration: ""
webkitTransitionProperty: ""
webkitTransitionTimingFunction: ""
webkitUserDrag: ""
webkitUserModify: ""
webkitUserSelect: ""
webkitWritingMode: ""
whiteSpace: ""
widows: ""
width: "100%"
willChange: ""
wordBreak: ""
wordSpacing: ""
wordWrap: ""
writingMode: ""
x: ""
y: ""
zIndex: ""
zoom: ""
有没有办法使用DOM样式作为反应样式而不会遇到打字错误？
在这种情况下，您将需要从字面上获取计算出的CSS属性，以便可以访问计算出的CSS值。这将防止样式对象上具有空字符串值的CSS属性出现问题。
一种方法是利用window.getComputedStyle()方法。
<div style={window.getComputedStyle(domElement.style)} />
您可能需要将类型声明为CSS属性：
<div style={window.getComputedStyle(domElement.style) as CSSProperties} />