Как перейти от реактивного реквизита к переменной sass?

Question

Я использую React и SASS, у меня есть компонент куба, и я хочу визуализировать его с динамической шириной. Тем не менее, я работаю с этой шириной в моем .scss. Вот пример.

Мой компонент:

<Cube style={{ width: '100px' }} />
<Cube style={{ width: '70px' }} />
<Cube style={{ width: '20px' }} />

My style.scss:

$cubeWidth: 150px;
$cubeHeight: $cubeWidth;
#cube {
      width: $cubeWidth;
      height: $cubeHeight;
}

// In this cube, I have -of course- 6 faces, and I operate in my style.scss:

.cubeFace1 {
     transform: translateZ($cubeWidth / 2);
}
... etc

Как можно получить мой $ cubeWidth равным моей динамической ширине? Кроме того, .scss загружается в index.js следующим образом:

// React index.js

import './css/style.scss';

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

Спасибо!