React possible to change scss variable? - reactjs

Question

Is it possible to override scss variables in react. I have for example a theme.scss with some scss variables. Is it possible to change these scss variables with the props of the Container. I know I could change style={{
backgroundColor: style.backgroundColor }} into style={{ backgroundColor: this.props.backgroundColor }} but then the $primary-font-color would'nt change, because I set $primary-font-color: $item-color; in my theme.scss. Is it possible to OVERRIDE my scss variable $item-color so that also $primary-font-color change?
This is only some example-code to explain what i mean:
theme.scss
$background-color: white;
$item-color: gray;
$primary-font-color: $item-color; // I want to override $item-color so that also $primary-font-color changes
$secondary-font-color: darken($primary-font-color, 15%);
export: {
backgroundColor: $background-color;
itemColor: $item-color;
primaryFontColor: $primary-fonty-color;
secondaryFontColor: $secondary-font-color;
}
index.js
ReactDOM.render(
<Container
backgroundColor: 'gray,
itemColor: 'black' // I want to change my scss variable to this value
/>,
document.getElementById('root')
);
Container
import style from '../style/_theme.scss';
class Container extends Component {
render(){
<div style={{ backgroundColor: style.backgroundColor }} >
<div className='item' style={{ backgroundColor: style.itemColor }} >
<p style={{ backgroundColor: style.itemColor }} >Some Text.. </p>
</div>
</div>
}

Answer 1

As I said in the comment manipulating CSS (SCSS so on) with React is generally not a good idea, because it will become hard to maintain. The preferred way to do this would be using classes, as they are reusable and more readable.
In your case what you can do is to define different theme classes, for example:
.whiteTheme {
.backgroundColor {
color: white;
}
.itemColor {
color: white;
}
.primaryFontColor {
color: white;
}
}
.greyTheme {
.backgroundColor {
color: black;
}
.itemColor {
color: grey;
}
.primaryFontColor {
color: grey;
}
}
And then manipulate the theme class name with React (this can happen only once, or per component, if you need it):
class Container extends Component {
render() {
<div className={this.props.isWhiteTheme ? 'whiteTheme' : 'greyTheme'}>
<div style="backgroundColor">
<div className='item' style="itemColor">
<p style="primaryFontColor">Some Text.. </p>
</div>
</div>
</div>
}
}
P.S Naming props or CSS class backgroundColor is not desirable, it's just for general direction.