React.js and CSS: Styling Your Components

React.js is renowned for its component-based architecture, but to bring those components to life, we need to style them. Styling in React.js can be done in various ways, but one of the most commonly used methods is through Cascading Style Sheets (CSS). In this blog post, we’ll start from basic examples and gradually move on to advanced CSS usage in React.js.

“Thinking about design is hard, but not thinking about it can be disastrous.” — Ralph Caplan

1. Basic: Inline Styling

Inline styling is the most basic way to style your components. You define your CSS directly on the elements using the style attribute. Note that you have to use the camelCase syntax instead of kebab-case, which is typically used in CSS.

class MyComponent extends React.Component {
  render() {
    // Define your styles
    const divStyle = {
      color: 'blue',  // Use camelCase syntax instead of kebab-case.
      backgroundColor: 'lightgray'
    };

    return (
      <div style={divStyle}>Hello, world!</div>  // Apply the styles using the 'style' attribute.
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));        

2. Intermediate: External Stylesheet

As your application grows, maintaining inline styles can become difficult. An external stylesheet can help keep your styles organized and maintainable.

// App.css
.container {
  color: blue;
  background-color: lightgray;
}

// App.js
import React from 'react';
import './App.css';  // Import the stylesheet.

class App extends React.Component {
  render() {
    return (
      <div className="container">Hello, world!</div>  // Use the 'className' attribute to apply styles from the stylesheet.
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));        

3. Advanced: CSS Modules

For large projects with many components, CSS Modules are a great option. CSS Modules are CSS files in which all class names and animation names are scoped locally by default. This means you don’t have to worry about class name collisions.

// MyComponent.module.css
.container {
  color: blue;
  background-color: lightgray;
}

// MyComponent.js
import React from 'react';
import styles from './MyComponent.module.css';  // Import the CSS Module.

class MyComponent extends React.Component {
  render() {
    return (
      <div className={styles.container}>Hello, world!</div>  // Apply styles from the CSS Module using the imported 'styles' object.
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));        

In this advanced example, we’re using a CSS Module to style our component. By importing the CSS file as styles, we can use it as an object where keys are class names defined in the CSS file.

Styling is an essential part of web development that allows us to create visually engaging interfaces. With React.js and CSS, we have multiple strategies to make our components shine. As Brad Frost once said, “Do what you can, with what you have, where you are”. Start with the basics and progress at your own pace. Happy coding!React.js and CSS: Styling Your Components