内联样式中-webkit-text-stroke失效问题求助

在React内联样式中处理带-webkit前缀的文字描边属性，需要遵循React的驼峰命名规则，以下是两种可行的正确写法：

• 拆分复合属性为单独的驼峰式属性（推荐）：
  React内联样式要求将带连字符的CSS属性转换为驼峰命名，-webkit-text-stroke是复合属性，可以拆分为webkitTextStrokeWidth和webkitTextStrokeColor两个属性分别设置：

  <div style={{
    webkitTextStrokeWidth: '1px',
    webkitTextStrokeColor: 'white'
  }}>
    带描边的文字
  </div>
  

• 使用带引号的复合属性（需注意兼容性）：
  若坚持使用复合属性，需要确保属性值格式正确，同时部分场景下需配合display: inline-block或block才能生效（文字描边需要元素为块级或行内块级）：

  <div style={{
    '-webkit-text-stroke': '1px white',
    display: 'inline-block'
  }}>
    带描边的文字
  </div>
  

之前写法失效的原因： #

• 直接写style={{-webkit-text-stroke:'1px solid white'}}会触发语法错误，因为JS对象中未加引号的键不能包含连字符，JS会将-webkit-text-stroke解析为减法表达式，导致“找不到-webkit-text-stroke”的错误。
• 加引号的'-webkit-text-stroke'虽然语法合法，但React的内联样式解析对这类带前缀的复合属性支持有限，且未设置合适的display属性也会导致描边效果不显现。

内容的提问来源于stack exchange，提问作者user21600351