Menu
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> 
488
Use inline styles to set the text color of an element in React. js, e.g. <span style={{color: 'green'}}>colorful</span> . The text color will only be applied to the element to which it was added and its children.
To change background color on click in React: Set the onClick prop on the element. When the element is clicked, set the active state. Use a ternary operator to conditionally set the background color based on the state variable.
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:
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>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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
