React and defatult css variables

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 {
} from '@ionic/react';
import Home from './pages/Home/Home'

class App extends Component {
    render() {
        return (

export default App;