小道具から変数を作成し、スタイル付きコンポーネントを使用してコードブロックで再利用しますか?

エヴァンス

基本的なスタイルのコンポーネントが機能しています。小道具isHereが渡されると、背景はになりblueます。

const Item = styled.ul`
  ${props => console.log(props.theme.colorGroupSelected)};
  ${props => (props.isHere ? `background:` + 'blue' : null)};
`;

代わりにblue、私は色を使用する必要がcolorGroupSelected私のテーマからではなく、私は仕事にそれを得るカント、私は構文エラーを取得しておきます。

    const Item = styled.ul`
      ${props => (props.isHere ? `background:` + props => props.theme.colorGroupSelected : null)};
    `;

私のコードは非常に読みにくくなっています。スタイル付きブロック内の変数を分解することは可能ですか?このようなもの:

 ${const colorGroupSelected = (props => return props.theme.colorGroupSelected)};

 ${props => (props.isHere ? `background:` + colorGroupSelected : null)};
エヴァンス

これは機能しますが、変数を分解しません。

 ${props => (props.isHere ? `background:` + props.theme.colorGroupSelected : null)};

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

スタイル付きコンポーネント-小道具に基づいてcssブロック全体を条件付きでレンダリングします

分類Dev

TypeScriptでテーマオブジェクトにインデックスを付けるために小道具を使用してスタイル付きコンポーネントに条件付きで属性を設定しますか?

分類Dev

小道具を使用して、TypeScriptプロジェクトでスタイル付きコンポーネントのCSSルールを設定します

分類Dev

小道具を使用して、スタイル付きコンポーネントのミックスインを使用して幅を切り替えます

分類Dev

異なるファイル間でスタイル付きコンポーネントとの「ミックスイン」を再利用しますか?

分類Dev

スタイル付きコンポーネントは、JavaScript変数に小道具値を取得します

分類Dev

コンストラクター関数と小道具を使用してコンポーネントをフックと小道具を使用して機能コンポーネントに変換するにはどうすればよいですか?

分類Dev

小道具を使用して他のコンポーネントに基づいてスタイル付きコンポーネントを作成する

分類Dev

小道具からの背景画像は、スタイル付きコンポーネントを使用して機能しません

分類Dev

Angular 8、9:ページで複数回使用された個々の再利用可能なコンポーネント(ng-block-ui統合)をブロックする方法| すなわち。複数のインスタンスを作成しますか?

分類Dev

ReactJS:スタイル付きコンポーネントの小道具が機能しないボックスシャドウでrgbaを使用する

分類Dev

スタイル付きコンポーネントオブジェクトからページに小道具をレンダリングできません

分類Dev

React-nativeコンポーネントのインデックスを作成し、それらを条件付きで小道具として渡すことは可能ですか?

分類Dev

vueで小道具を使用して親コンポーネントから子コンポーネントにaxios応答オブジェクトを渡す方法

分類Dev

フックを使用する親から子コンポーネントに小道具を渡しますか?

分類Dev

React.jsの子コンポーネントが小道具から派生したスタイルを更新しないのはなぜですか?(スタイル付きコンポーネント)

分類Dev

反応ネイティブで再利用可能なコンポーネントを作成しますか?

分類Dev

カスタムスタイルの小道具を持つサードパーティコンポーネントでスタイルコンポーネントを作成しますか?

分類Dev

子の数/タイプ/小道具から親コンポーネントの構成を抽出します

分類Dev

スタイル付きコンポーネントで小道具を使用すると、正常に機能しますが、警告が表示されます(警告:ブール値以外の属性 `cen`に対して` true`を受け取りました)

分類Dev

ブレードファイルから小道具として動的データをvueコンポーネントに渡す方法は?

分類Dev

styled-componentsの親小道具に基づいてネストされたコンポーネントのスタイルを変更しますか?

分類Dev

スタイル付きコンポーネントの小道具を介したマッピング

分類Dev

BIND()を使用してカスタムコンポーネントメソッドをコンポーネントにバインドするときに、最初の引数をコンポーネント自体として渡すことはできますか?

分類Dev

OnPressはコンポーネントのスタイルをループから変更します-フックでネイティブに反応します

分類Dev

親レイアウトコンポーネントからルーターコンポーネントに反応する小道具を送信します

分類Dev

onClickイベントに基づいてスタイル付きコンポーネントの小道具を切り替えることはできますか?

分類Dev

'onClick'を使用して、コンポーネントから子コンポーネントにルートで小道具を渡す方法

分類Dev

小道具を介してアクションを渡す方法はありますか?react-reduxで再利用可能なコンポーネントを作成するには

Related 関連記事

  1. 1

    スタイル付きコンポーネント-小道具に基づいてcssブロック全体を条件付きでレンダリングします

  2. 2

    TypeScriptでテーマオブジェクトにインデックスを付けるために小道具を使用してスタイル付きコンポーネントに条件付きで属性を設定しますか?

  3. 3

    小道具を使用して、TypeScriptプロジェクトでスタイル付きコンポーネントのCSSルールを設定します

  4. 4

    小道具を使用して、スタイル付きコンポーネントのミックスインを使用して幅を切り替えます

  5. 5

    異なるファイル間でスタイル付きコンポーネントとの「ミックスイン」を再利用しますか?

  6. 6

    スタイル付きコンポーネントは、JavaScript変数に小道具値を取得します

  7. 7

    コンストラクター関数と小道具を使用してコンポーネントをフックと小道具を使用して機能コンポーネントに変換するにはどうすればよいですか?

  8. 8

    小道具を使用して他のコンポーネントに基づいてスタイル付きコンポーネントを作成する

  9. 9

    小道具からの背景画像は、スタイル付きコンポーネントを使用して機能しません

  10. 10

    Angular 8、9:ページで複数回使用された個々の再利用可能なコンポーネント(ng-block-ui統合)をブロックする方法| すなわち。複数のインスタンスを作成しますか?

  11. 11

    ReactJS:スタイル付きコンポーネントの小道具が機能しないボックスシャドウでrgbaを使用する

  12. 12

    スタイル付きコンポーネントオブジェクトからページに小道具をレンダリングできません

  13. 13

    React-nativeコンポーネントのインデックスを作成し、それらを条件付きで小道具として渡すことは可能ですか?

  14. 14

    vueで小道具を使用して親コンポーネントから子コンポーネントにaxios応答オブジェクトを渡す方法

  15. 15

    フックを使用する親から子コンポーネントに小道具を渡しますか?

  16. 16

    React.jsの子コンポーネントが小道具から派生したスタイルを更新しないのはなぜですか?(スタイル付きコンポーネント)

  17. 17

    反応ネイティブで再利用可能なコンポーネントを作成しますか?

  18. 18

    カスタムスタイルの小道具を持つサードパーティコンポーネントでスタイルコンポーネントを作成しますか?

  19. 19

    子の数/タイプ/小道具から親コンポーネントの構成を抽出します

  20. 20

    スタイル付きコンポーネントで小道具を使用すると、正常に機能しますが、警告が表示されます(警告:ブール値以外の属性 `cen`に対して` true`を受け取りました)

  21. 21

    ブレードファイルから小道具として動的データをvueコンポーネントに渡す方法は?

  22. 22

    styled-componentsの親小道具に基づいてネストされたコンポーネントのスタイルを変更しますか?

  23. 23

    スタイル付きコンポーネントの小道具を介したマッピング

  24. 24

    BIND()を使用してカスタムコンポーネントメソッドをコンポーネントにバインドするときに、最初の引数をコンポーネント自体として渡すことはできますか?

  25. 25

    OnPressはコンポーネントのスタイルをループから変更します-フックでネイティブに反応します

  26. 26

    親レイアウトコンポーネントからルーターコンポーネントに反応する小道具を送信します

  27. 27

    onClickイベントに基づいてスタイル付きコンポーネントの小道具を切り替えることはできますか?

  28. 28

    'onClick'を使用して、コンポーネントから子コンポーネントにルートで小道具を渡す方法

  29. 29

    小道具を介してアクションを渡す方法はありますか?react-reduxで再利用可能なコンポーネントを作成するには

ホットタグ

アーカイブ