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

IT技术 javascript html reactjs
2021-05-11 20:57:20

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

我怎样才能做到这一点？

<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>
4个回答

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

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

或者

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

欲了解更多信息：

演示：

显示代码片段

index.html 中的样式标签

<style>
  .textColor{
     color : 'red'
  }
<style>

利用 ： <h1 className="textColor">text colors</h1>

内联：

<h1 style={{ color: 'red' }}>inline styling</h1>

使用样式对象

const styles= {
    color: 'red',
};
<h1 style={styles}>Style obje</h1>

您可以使用外部 css 文件，然后将其导入到您的代码中

您还可以使用内联 CSS

<NavLin / to="/home" activeStyle={{ color:'green', fontWeight: 'bold'}}> Home </NavLin>

可以在此处填充样式对象

activeStyle={{ color:'green', fontWeight: 'bold'}}

你可以像下面这样做：

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

React 将样式属性视为一个对象。所以我们必须提供双引号 "{{ }}" 并且里面是我们的 css 代码。符号也应该是camel-case. 例如{{backgroundColor: 'red'}}

其它你可能感兴趣的问题
上一篇如何在本机模式中使背景变暗？ 下一篇万豪i3 PLUS上的自动复位跳线在哪里？