Как изменить значение переменной SASS с помощью React Js?

Question

Прежде чем сделать дублирующий вопрос, пожалуйста, убедитесь, что вы прочитали мой вопрос

Я задаю этот вопрос в 2019 году, где в документации React Js указано, что мы можем использовать SASS в нашем реактивном проекте, здесь ссылка

Я хочу переключаться между светлой темой и темной темой, используя динамическую переменную, которая управляется щелчком пользователя

Мой код реакции

import React from 'react';
import './App.scss';

class App extends React.Component {
    render() {
        return (
            <div className="Home">
                I’m slow and smooth
                <button onClick={() => console.log()}>Change theme</button>
            </div>
        );  
    }
}

export default App;

Мой код SASS:

$theme: light;  // I want to control this variable

$bgcolor: #222222;

@if($theme== light) {
    $bgcolor: white;    
}
@else {
    $bgcolor: black;    
}

.Home {
    background-color: $bgcolor;
    height: 100vh;
}