在JSX文件中，可以使用<div style={{color: 'red'}}>Hello World!</div>

我会用一个类来完成这个任务。

function Example() {
  return (
    <div className="red">
      Hello world!
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.red { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

或者，如果你要把props传递给另一个组件，你也可以使用这个方法，只要把颜色作为prop传递，然后使用className={color}。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

你可以创建这样的东西，你传入value和color作为 prop 。

const Label = ({ value, color }) => {
  return <div style={{ color: color }}>{value}</div>;
};

你可以这样使用它

export function Preview() {
  return <Label value={"Solution"} color={"blue"} />;
}