スタイラスコンポーネントでJavascript変数を使用

Question

私はstyled-componentsを使用してコンポーネントをビルドしています。カスタム値を受け入れるすべてのスタイルプロパティは、コンポーネント全体で再利用されます。そのことを念頭に置いて、いくつかの種類のグローバル変数を使用して、個々のスタイルを個別に更新する必要なくすべてのコンポーネントに更新が伝播するようにしたいと考えています。このような

何か：

// 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の土地では推奨されていないことを知っていますが、コンポーネント間の土地再利用スタイルを設計することは絶対必要です。ここでのトレードオフは何ですか？

Answer 1

私は結局これを理解したので、少なくともReactを使用している場合、これを行う方法はここにあります。

変数を1つのファイルに定義してエクスポートする必要があります。

// Variables.js 

export const FONTSIZE_5 = '20px'; 

これらの変数を各コンポーネントファイルにインポートする必要があります。

// Button.js 

import * as palette from './Variables.js'; 

その後、あなたはこのようなあなたのスタイルのコンポーネントで変数を使用することができます。

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

Answer 2

アプリケーションの周り<ThemeProvider>をラッピングすることに役立つことがあります。

https://www.styled-components.com/docs/advanced#theming

const theme = { 
    fontColour: 'purple' 
} 

render() { 
    return (
    <ThemeProvider theme={theme}> 
     <MyApplication /> 
    </ThemeProvider> 
) 
} 

すべての子スタイルのコンポーネントが次のようにテーマにアクセスできるようになります：

const MyApplication = styled.section` 
    color: ${props => props.theme.fontColour} 
` 

それとも

const MyFancyButton = styled.button` 
    background: ${props => props.theme.fontColour} 
` 

それともhttps://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components

経由テーマにアクセス