CODEWITHSUNDEEP
javascripthtmlreactjs
Just Ahead
Just Ahead

Reputation: 2487

How to set color to text in React JS

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>

Upvotes: 31

Views: 156912

Answers (5)

Avnish Jayaswal
Avnish Jayaswal

Reputation: 459

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Hi {' '}
        <span style={{color: 'white', backgroundColor: 'green'}}>Hello</span>{' '}
        text
      </p>
    </div>
  );
};

export default App;

Upvotes: 1

Revansiddh
Revansiddh

Reputation: 3062

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>

Upvotes: 7

Rajat
Rajat

Reputation: 172

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

Upvotes: 3

palaѕн
palaѕн

Reputation: 73896

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>

Upvotes: 42

Ricks
Ricks

Reputation: 409

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

Upvotes: 3

Related Questions