如何在React的JSX中使用-webkit-等CSS前缀属性？

你之前通过style={{ fontSize: fontSize }}成功实现了字体大小的动态设置，现在想要对-webkit-text-stroke做同样的动态绑定，但尝试过程中遇到了问题。以下是解决方法：

核心结论 #

React完全支持使用-webkit-、-moz-这类带浏览器前缀的CSS属性，只要遵循正确的JS对象语法即可。

正确的两种写法 #

1. 带引号的短横线属性名 #

由于JS对象的键名包含短横线时必须用引号包裹，你可以直接使用原生CSS属性名，只需给键名加上引号：

<div style={{ "-webkit-text-stroke": textStroke }}>Some text</div>

2. 驼峰命名形式 #

按照规则转换为驼峰命名时，前缀的首字母需要大写（比如webkit转为Webkit），后面的属性名驼峰化（text-stroke转为TextStroke），最终写法为：

<div style={{ WebkitTextStroke: textStroke }}>Some text</div>

VS Code的提示可能不全，但这个属性是有效的，你可以直接使用。

额外注意事项 #

-webkit-text-stroke是简写属性，需要同时指定宽度和颜色（比如"2px black"）才能看到明显的描边效果。如果只传入宽度（比如"2px"），颜色会默认使用文本的currentColor，若文本颜色与背景色接近，可能会出现视觉上“无效”的情况。

修正后的示例代码 #

import { useState } from 'react';

function App() {
  const [textStroke, setTextStroke] = useState("2px black");

  function applyStroke(event) {
    event.preventDefault();
    const input = document.querySelector(".input-field").value;
    setTextStroke(input);
  }

  return (
    <main>
      <form onSubmit={applyStroke}>
        <input 
          className="input-field"
          placeholder="例如：2px black"
        />
        <button type="submit">应用描边</button>
      </form>

      {/* 两种写法任选其一 */}
      <div style={{ "-webkit-text-stroke": textStroke }}>
        测试描边文本
      </div>
      <div style={{ WebkitTextStroke: textStroke }}>
        测试描边文本（驼峰写法）
      </div>
    </main>
  );
}

export default App;

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