React and defatult css variables

Ionic Framework
1

Hi, I have started building an Ionic app with React and am having troubles with overriding the default css variables. I have set new variables and placed them in a separate css file to then import to main App.js as per below however this does not override the default ones. Am I doing something wrong?

import React, { Component } from 'react';
// Import Ionic 4 styles
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';
import './theme.css';
import {
    IonApp,
} from '@ionic/react';
import Home from './pages/Home/Home'

class App extends Component {
    render() {
        return (
            <IonApp>
                <Home/>
            </IonApp>

        );
    }
}
export default App;