React
  • Introduction
  • Getting Started
    • Introduction
    • Before you get started
  • 1. Fundamentals
    • Introduction
    • Rendering
      • JSX
      • Exercise
      • Solution
    • Components
      • Stateless
        • Exercise
        • Solution
      • Stateful
        • Exercise
        • Solution
      • Styling
        • Exercise
        • Solution
        • Using CSS Modules
    • Folder Architecture
  • 2. Intermediate
    • Lifecycle methods
    • Controlled and Uncontrolled components
    • Anti-patterns
    • Refs and the DOM
    • Lifting State Up
  • 3. Advanced Topics
    • Conventions
    • Reconciliation
    • Performance Optimizations
      • Avoiding Reconciliation
      • PureComponent
      • Avoiding inline lambdas
      • Development vs Production build
    • Context
  • 4. Advanced Patterns
    • Higher-order Components
    • Children as Function
    • Renderless Components
    • Portals
    • Error handling
  • Exercises
    • Introduction
    • 1. ProductList light
      • Step 1
      • Step 2
      • Step 3
      • Step 4
      • Extra
      • Solution
Powered by GitBook
On this page
  • The class names way
  • Title.css
  • Title.js
  • The inline styles way
  • Style.js
  • Title.js
  1. 1. Fundamentals
  2. Components
  3. Styling

Solution

The class names way

Title.css

.Title {
  font-size: 24px;
  color: #333;
  text-align: center;
}

Title.js

import React from 'react';
import './Title.css';

function Title() {
  return (
    <h1 className="Title">
    😺 Emoji picker 🐶
    </h1>
  );
}

The inline styles way

Style.js

export default {
  Title: {
    textAlign: 'center',
    fontSize: 24,
    color: '#333',
  }
}

Title.js

import React from 'react';
import styles from './Style.js';

function Title() {
  return (
    <h1 style={styles.Title}>
      😺 Emoji picker 🐶
    </h1>
  );
}
PreviousExerciseNextUsing CSS Modules

Last updated 6 years ago