javascript - styled-components で Javascript 変数を使用する

Question

スタイル付きコンポーネントを使用してコンポーネントを構築しています。カスタム値を受け入れるすべてのスタイル プロパティは、コンポーネント全体で再利用されます (そうあるべきです)。それを念頭に置いて、各スタイルを個別に更新する必要なく、更新がすべてのコンポーネントに伝播されるように、ある種のグローバル変数を使用したいと思います。

このようなもの：

// Variables.js

var fontSizeMedium = 16px;

// Section.js

const Section = styled.section`
  font-size: ${fontSizeMedium};
`;

// Button.js

const Button = styled.button`
  font-size: ${fontSizeMedium};
`;

// Label.js

const Label = styled.span`
  font-size: ${fontSizeMedium};
`;

私は構文が間違っていると思いますか？また、Javascript の世界ではグローバル変数が推奨されないことはわかっていますが、デザインの世界では、コンポーネント間でスタイルを再利用することが絶対に必要です。ここでのトレードオフは何ですか？