时间戳

首页 > 解决方案 > 如何在 React JS 中为文本设置颜色

javascript - 如何在 React JS 中为文本设置颜色

问题描述

我只想使用标签中的样式更改文本的颜色

我怎样才能做到这一点？

<div id="root"></div><br>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script><br>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script><br>

<script type="text/babel">
const rootElement = document.getElementById('root');<br>
const element = <h1>Hello world</h1><br>

ReactDOM.render(element, rootElement);<br>
</script>

标签： javascripthtmlreactjs

解决方案

您可以使用内联样式，例如：

const element = <h1 style={{ color: 'red' }}>Hello world</h1>

或者

const hStyle = { color: 'red' };
const element = <h1 style={ hStyle }>Hello world</h1>

欲了解更多信息：

演示：

const rootElement = document.getElementById('root');
const element = <h1 style={{ color: 'red' }}>Hello world</h1>;
ReactDOM.render(element, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

推荐阅读