[FIXED] How do I use -webkit- prefix in JSX?

Issue

I have a state fontSize that can be changed by user via an input field. I then use fontSize to dynamically set the font size of some text on the page:

const [fontSize, setFontSize] = useState("32px");

// sets the font size provided by user
// is fired when user clicks "apply" button
function applyFontSize(event) {
        event.preventDefault();

        const userInput = document.querySelector("#font-size-input").value
        setFontSize(userInput)
}

   
return (
        <form className="wrapper">
                <div className="option-wrapper">
                    <input 
                        className="input"
                        id="font-size-input"
                        placeholder="Font size (default 32px)"
                    />
                    <button 
                        className="apply-button"
                        onClick={applyFontSize}
                    >
                    Apply
                    </button>
                </div>
        </form>

  
        <div className="text-wrapper">
                <div 
                    className="top-text"
                    style={{
                        fontSize: fontSize
                    }}
                >
                    {topText}
                </div>
                <div 
                    className="bottom-text"
                    style={{
                        fontSize: fontSize
                    }}
                >
                    {bottomText}
                </div>
         </div>
    )

So, in the code above I use style={{ fontSize: fontSize }}

Now, I want to do the same thing with text-stroke property, which is only supported with the -webkit- prefix

Essentially, I want something like this:

const [textStroke, setTextStroke] = useState("2px")

function applyStroke(event) {
        event.preventDefault();

        const input = document.querySelector(".input-field").value
        setTextStroke(input)
}

return (
   <main>
      <div
      style={{ -webkit-text-stroke: textStroke }}
      >
      Some text
      </div>
   </main>
)

Following the principle of converting kebab case to camel case, I tried WebkitTextStroke, which didn't work

When I tried typing "webkit" inside the style prop, VS Code suggested "webkitURL", as seen below:

But I could not find a single documentation on it

Is it even possible to use prefixes like -webkit- or -moz- in JSX (react.js) ?

Solution

All I had to do was add a comma between between properties like so:

style={{
   fontSize: fontSize,
   WebkitTextStroke: textStroke + " black"
}}

Big thanks to Konrad Linkowski, I noticed that in a question he linked

Answered By - Matvey Morozov
Answer Checked By - - Timothy Miller (ReactFix Admin)