我有以下使用React呈现的HTML:
<a
style='background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:8px;font-weight:bold;line-height:1;display:inline-block;border-radius:3px'
href= //...
target='_blank'
rel='noopener noreferrer'
className='credit-box-abs'
>
<span style='display:inline-block;padding:2px 3px;font-size:11px'>
<i className='fas fa-camera-retro'></i>
</span>
<span style='display:inline-block;padding:2px 3px'>Photographer name</span>
</a>
[当我尝试编译时,我收到关于每个style
的以下警告:
Style prop value must be an object
和错误:
The `style` prop expects a mapping from style properties to values, not a string.
来自编译器的建议解决方案以及在线说明:
<div style={{ styleAttribute: 'whatever', ... }}>
所以我尝试了以下操作:
<a
style={{background-color:'black';color:'white';text-decoration:'none';padding:'4px 6px';font-family:'-apple-system , BlinkMacSystemFont, \"San Francisco\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, \"Segoe UI\", Arial, sans-serif ';font-size:'8px';font-weight:'bold';line-height:'1';display:'inline-block';border-radius:'3px'}}
href= //...
target='_blank'
rel='noopener noreferrer'
className='credit-box-abs'
>
<span style='display:inline-block;padding:2px 3px;font-size:11px'>
<i className='fas fa-camera-retro'></i>
</span>
<span style='display:inline-block;padding:2px 3px'>Photographer name</span>
</a>
但是语法不正确。我应该在''
中包装每个属性的所有值吗?特别地,background-color: 'black'
的语法在下面加上红线,在我关闭的</a>
标记下也给出红线。
[background-color
是css属性,因为相同的JS属性名称是backgroundColor
,所以如果您尝试{backgroundColor: 'black'}
,那应该起作用。
有关更多CSS及其各自的JS属性,请参阅Common CSS Properties Reference
使用camelCase。例如。 backgroundColor
您不应使用css属性,而应使用等效的Jss属性,例如backgroundColor
或textDecoration
,您可以在此处检查整个列表:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference