反应:`style`道具期望从样式属性到值的映射,而不是字符串[duplicate]

问题描述 投票:-1回答:2

我有以下使用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>标记下也给出红线。

javascript html reactjs syntax react-props
2个回答
0
投票

[background-color是css属性,因为相同的JS属性名称是backgroundColor,所以如果您尝试{backgroundColor: 'black'},那应该起作用。

有关更多CSS及其各自的JS属性,请参阅Common CSS Properties Reference


0
投票

使用camelCase。例如。 backgroundColor


0
投票

您不应使用css属性,而应使用等效的Jss属性,例如backgroundColortextDecoration,您可以在此处检查整个列表:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

© www.soinside.com 2019 - 2024. All rights reserved.