как сделать таблицу CSS для работы в reactjs, если компоненты находятся в отдельной папке компонента

Как заставить таблицу стилей index.css работать. У меня есть все мои компоненты в папке компонентов внутри src, и она отлично работает, но index.css не работает. Здесь перечислены все разные файлы: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/app';


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

Внутренние компоненты app.js

import React, { Component } from 'react';


import App1 from './app1';
class App extends Component {
  render() {
    return (
      <div >
        <App1/>
        <App1/>

      </div>
    );
  }
}

export default App;

и папка app1.js внутри компонентов

import React, { Component } from 'react';
class App1 extends Component {
  render() {
    return (
      <div >


        <h1> hello </h1>
      </div>
    );
  }
}

export default App1;

и index.css

.h1{
  font: italic;
  color: red;
}    

В моем app1.js я создаю простой заголовок, но css не вступает в действие.