I just want to change color of text using style in tag
How can I do that?
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>
You can use external css file and then import it in your code
You can also use Inline CSS
<NavLin / to="/home" activeStyle={{ color:'green', fontWeight: 'bold'}}> Home </NavLin>
Object of style can be populated here
activeStyle={{ color:'green', fontWeight: 'bold'}}
You can do it like below :
<h1 style={{color: 'red'}}>Hello world</h1>
React treats style attribute as an object. So we have to provide double quotes "{{ }}" and inside that is our css code.
Also the notation should be camel-case
.
e.g. {{backgroundColor: 'red'}}