How to set color to text in React JS

Question

I just want to change color of text using style in tag

How can I do that?

<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> 

Answer 1

You can use inline-style like:

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

or

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

For more info:

• Inline Styles

Demo:

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>

Answer 2

style tag in index.html

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

Use : <h1 className="textColor">text colors</h1>

Inline:

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

Using Style Object

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