How To Set Text Color In React

Set text color in React will be essential when working with React because it also shows you how your element style. You can use style attribute or styled-components library to set text color. So how to do it? Let’s go into detail now.

How to set text color in React

Use style attribute

In React, you can use the style attribute if you want to style some elements. With style attribute, you can style your element according to your purpose.

Example:

import './App.css';

function App() {
    return (
        <div className="App">
          	<text style={{color: 'green'}}>Hello From Learn Share IT</text>
        </div>
    );
}

export default App;

Output:

Here remember to wrap your style property inside double curly braces. One to escape the JSX syntax and one for the required Javascript syntax. Besides color style, there are a lot of other style properties. You can read more about it here. You have to separate properties with commas ‘,‘.

Example:

import './App.css';

function App() {
    return (
        <div className="App">
            <text style={{
            	color: 'green', 
              	fontSize: '24px',
              	letterSpacing: '3px',
              	backgroundColor: 'black'
          	}}>Hello From Learn Share IT</text>
        </div>
    );
}

export default App;

Output:

You can also assign all properties to a variable and pass that variable in the style attribute. In that way, you can easier set your element.

Example:

import './App.css';

function App() {
    const textStyle = {
      	color: 'green', 
      	fontSize: '24px',
      	letterSpacing: '3px',
      	backgroundColor: 'black'
    };
  
    return (
        <div className="App">
          	<text style={textStyle}>Hello From Learn Share IT</text>
        </div>
    );
}

export default App;

Output:

Use styled-components library

NPM also provides a library called ‘styled-components’, allowing us to write CSS code to style components more straightforwardly and quickly.

To use it, firstly, you have to install it by using the command below:

npm install --save styled-components

There are many ways to work with the styled-components library, but we can use it in this way.

Example:

import styled from 'styled-components';
import './App.css';

const StyledText = styled.text`
	color: green
`;

function App() { 
    return (
        <div className="App">
          	<StyledText>Hello From Learn Share IT</StyledText>
        </div>
    );
}

export default App;

Here I import styled from the ‘styled-components’ library. Then I can create an element that has already been styled. The name is optional but you must start with a capital letter because it will be an element. Then inside the backticks `` syntax, you can add style properties just like you write with CSS.

Example:

import styled from 'styled-components';
import './App.css';

const StyledText = styled.text`
    color: green;
    font-size: 25px;
    background-color: black;
`;

function App() { 
    return (
        <div className="App">
          	<StyledText>Hello From Learn Share IT</StyledText>
        </div>
    )
}

export default App;

Output:

Summary

I have shown you how to set text color in React in this tutorial. You can use the style attribute provided by React, or the ‘styled-components’ library will make it easier to work with style elements. Thanks for reading!

Maybe you are interested:

• You provided ‘value’ prop to a form field without onChange handler
• How to create a Delay function in React
• how to only call a function once in react

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm