web-dev-qa-db-ja.com

スタイル付きコンポーネントでのJavaScript変数の使用

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ランドではグローバル変数は推奨されませんが、デザインランドではコンポーネント間でスタイルを再利用することが絶対に必要です。ここでのトレードオフは何ですか？

javascriptstyled-components
18
colmtuite

私は最終的にこれを理解したので、少なくとも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};
`;
23
colmtuite

<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 からテーマにアクセスします

22
Ricardinho