StyleReactElements.md

Styling Reactjs App

There are several ways we can style our ReactElements and Compoents but we will only cover the inline CSS, the CSS stylesheet and the CSS Modules.

Some of the other strategies include – CSS-in-JS (e.g styled components, Emotion, JSS), Sass & SCSS, Less, Utility-First-CSS (e.g Tailwind CSS).

CSS Stylesheet

This is quite basic and straight forward method as you should be familiar with it while working with HTML file.

You start by creating a new file called App.css in the src folder.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.4;
  color: #444;
  background: #fff;
  height: 100vh;
}

Then we import it in the index.js file as shown below:

import React from "react"
import ReactDOM from "react-dom"
import About from "./components/About"

// import stylesheet
import "./App.css"

ReactDOM.render(
  <React.StrictMode>
    <About />
  </React.StrictMode>,
  document.getElementById("root")
)

NOTE

In HTML, we add CSS classes to elements using the class syntax. But in React JSX, we make use of a special syntax called className, since in JavaScript class is a keyword.

Example:

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      </div>
    </div>
  );
}

And to style the container div in our component we add the following styles inside our App.css file.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

Inline styling

Inline styling in HTML document are added by passing a string of all the styles to the style attribute. But with React JSX, we assign a JavaScript object to the attribute.

Example

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    </h1>
  </header>
)

Another way to use an inline style in React is to use variables.

Example

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}


<header style={headerStyle}>

Styling React App with CSS Modules

Sometimes, you would want to limit the CSS stylesheet approach to hold your global styles and then scope your component styles locally.

CSS Modules allows us to do that. It eliminates the risk of name conflicts associated with the CSS selector or some other issues related to the global scope styling.

For instance, if you add a CSS Module for a About component, the styles applied will be scoped only to that component. This way, you can use the same class names in different components without worrying about conflicts with the CSS selector.

To style the a TodoItem component, create a file called TodoItem.module.css. Then, add your styles:

.item {
  font-size: 1.2rem;
  list-style-type: none;
  padding: 17px 0px;
  border-bottom: 1px solid #eaeaea;
}

.checkbox {
  margin-right: 15px;
}

.item button {
  font-size: 13px;
  background: #f1f3f4;
  border: none;
  cursor: pointer;
  float: right;
  outline: none;
  border-radius: 100px;
  height: 50px;
  width: 50px;
  margin: -10px 0 0 10px;
}

After that, go inside your component and import the .css file like so:

import styles from "./TodoItem.module.css" 

Then, update the markup within the return statement to include the class names:

return (
  <li className={styles.item}>
    <input
      type="checkbox"
      className={styles.checkbox}
      checked={this.props.todo.completed}
      onChange={() => this.props.handleChangeProps(this.props.todo.id)}
    />
    <button onClick={() => this.props.deleteTodoProps(this.props.todo.id)}>
      Delete
    </button>
    {this.props.todo.title}
  </li>
)