我可以仅对html输入的字符串值的特定部分设置样式吗？

Question

我可以仅对输入值的一部分进行样式设置吗？

像下面的示例（下面的代码片段）一样，我可以仅对粗体的“ @user”部分设置样式，并让“其他内容”保持不变吗？

如果那不可能，我正在考虑使用divwith contexteditable。这是另一种方法，但是行得通吗？

function App() {

  const [value,setValue] = React.useState('@user some other content...');

  

  function handleChange(e) {

    setValue(e.target.value);

  }

  

  return(

    <input 

      style={{width:'300px'}}

      type='text'

      value={value}

      onChange={handleChange}

    />

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>