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>
  );
}

Last updated