The Basics of Styling and Writing CSS in React

How to style React components with JavaScript

In plain HTML, we style our components and use JavaScript like this:

<p style='color:blue;'>Hello, my name is <span id='name'> </span> </p>
<script>
let s = document.getElementById('name')
s.innerText= 'Hussain'
</script>

However in React, we do it like this:

function App() {
  let myName= 'Hussain'
  return(
    <p style={{color:'blue'}}> My name is {myName} </p>
    );
}
ReactDOM.render(<App/>, document.getElementById('root'));

In React, we perform this task differently — in such a way that it becomes easier on the eyes. In this tutorial, we’ll discuss how to use CSS properties in React and how to run JavaScript code within JSX tags.

Styling and CSS

There are three ways to style components: inline styling, CSS style sheets, and module CSS

1. Inline Styling

Single inline styles: In normal HTML, we use inline styling in your apps like this:

<p style="color:blue;"> This is a text </p>

However, this concept is different in React. When using styles in React, we enclose them with double curly braces.

As an example, let’s render a p element in blue:

function App() {
  return(
    <p style={{color:'blue'}}> This is a text </p>
    )
}
ReactDOM.render(<App/>, document.getElementById('root'))

Note that the styles are enclosed with double curly braces ({{}} ).

This is the result:

Multiple inline styling

Using multiple styles in inline CSS is also easy.

<p style={{color:'white',backgroundColor:'gray'> This is a text </p>

Bear in mind that React uses the camelCase notation for CSS style properties. For example, the background-color property in CSS is equivalent to backgroundColor.

Use an object variable

It isn’t practically feasible to use multiple inline styles, so you need a variable to store all of your styles:

const mystyles = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
//..further code
<p style={myStyles}> My style! </p>

Here, mystyles is an object that contains all of the relevant CSS styles. Later, this object is passed on in the style property.

This will be the output:

2. Stylesheet

As a developer, code modularity should be treated as an important stage of your program. In many projects, the CSS Styles are located within another file.

To implement such behavior, create a new file, myStyle.css , and write this code:

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Note: Since this is a CSS file and not React code, we won’t be using camelCase anymore.

Now let’s import it into our React file, using the following syntax:

import "./filename.css"

filename.css is the name of your CSS file. Note that relative file paths need to be specified.

Using it in React code:

This is the output:

3. Module CSS

This method is convenient for HTML elements placed in separate files.

It’s similar to the CSS Stylesheet method, but this time the CSS file should contain the .module.css extension.

As an example, create a file named myFile.module.css:

.error {

background-color: red;

}

Now within th eReact app, write the following code:

import React, { Component } from 'react';

import styles from './myFile.module.css'; // Import css modules stylesheet as styles

function Error() {

return(
 <h1 className={styles.error}>Error Occurred!</h1>;
)
}

This will be the output:

Say that we want to run JavaScript expressions within our HTML. Now let’s move on to JavaScript within JSX.

JavaScript Within JSX

In React, it’s possible to run JavaScript code in between JSX tags — by using curly braces({}) in the tag. These curly braces contain the JavaScript code.

Embed expressions within JSX

As an example, let’s store a name inside a variable,myName and then print its value in HTML.

First, declare a variable, myName:

function App() {
let myName = 'Hussain'
...

Now, display its value in a p tag:

return (
 <p> Hello, {myName}, nice to meet you! </p>
);
}

Note that the JavaScript code within JSX tags is executed within the curly braces.

Ultimately, the code looks like this:

function App() {
  let myName= 'Hussain'
  return(
    <p> My name is {myName} </p>
    );
}
ReactDOM.render(<App/>, document.getElementById('root'));

The compiler initially executes the code as HTML. Later, when it encounters a set of curly braces, it switches to JavaScript.

The output is as follows:

Note that we don’t need the span elements any longer. This makes development easier.

You can even execute functions in JavaScript in JSX:

This will be the output of the code above:

JSX is also an expression

After compilation, JSX expressions become normal JavaScript function calls and also evaluate to JavaScript objects.

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions.

Let’s define a function to greet the user, depending on function parameters:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {user} !</h1>; 
 }
  return <h1>Hello, Stranger.</h1>;
}

To use it within JSX:

<div>
 With parameter: {getGreeting('Hussain')} 
 {getGreeting()}
<div>

The output of the code will be as follows:

Specify element properties with JSX

We can even specify element properties using JavaScript. For example, let’s specify an src property of an img tag through JSX. A simple snippet can be like this:

//..
const src= 'image.jpg'
return(
<img src={src} />
)
//..

Ultimately, we can use it in our code like this:

The output will be as expected:

Recap

CSS

Inline styles: Use double curly braces to use CSS styles in React

Follow camelCase notation.

return(
<h1 style={{color:'white',backgroundColor:'black'}}> Text </h1>
)
//... other code

External Stylesheets: Use import keyword and then name of your CSS file.

import "./myFile.css"
//.. other code

CSS modules:

myFile.module.css

.error {
//styles
}

Your React file:

import myStyle from "./myFile.module.css"
function App() {
return (
  <h1 style={myStyle.error}> Text </h1>
  )
}

JavaScript within JSX

Use curly braces to use JavaScript.

const myNumber = 9
return(
  <p> My lucky number : {myNumber} </p>
)

Conclusion

If you find any of this confusing, my advice to you is to play with the code and deconstruct the example programs above. It will help you to wrap your head around the concepts. Don’t give up!

Thank you for making it to the end! I hope you learned a lot from this topic. Have a great day!

Previous Article : How to Get Started With React Next Article : A Guide To Props In React

Further Reading

• 5 Ways to Style React Components
• Adding a CSS Modules StyleSheet
• React CSS
• Introducing JSX
• JSX in Depth