styled-components

1熱

1答えて

私は基本的な基本レベルのStyledTextコンポーネントを持っているとしましょう。 import styled from 'styled-components/native' const StyledText = styled.Text` font-size: 16px; color: pink; ` export default StyledText 次に、タイ

0熱

1答えて

スタイル付きコンポーネント：補間された関数またはcomponent.extend？

styled-componentでは、（propsを渡すことによって）コンポーネントを修正するために補間された関数を使うべきか、既存のコンポーネントを拡張するべきかをどうやって決めるのですか？例： const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em;

1熱

1答えて

反応不変のエラー

私は、ステージング環境でこれをテストするときにのみ、次のエラーに遭遇します。ただし、コードをローカルで実行するとエラーなしで実行されます。 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components

1熱

1答えて

スタイリッシュコンポーネント/ e2eテストに反応する：CSSセレクターを使用する最良の方法は何ですか？

私は反応アプリでstyled-componentsを使用していますが、e2eテストで問題が発生しました。スタイル付きコンポーネントはハッシュされたクラスを生成するため、nightwatch CSSセレクタを使用するのは難しいです。 .attributeContains（）アサーションを使用できるように、生成されたクラスに接頭辞を追加することはできますか？もっと良い解決策がありますか？

0熱

1答えて

ネストされたオブジェクトのデストラクション：重複宣言 "fontSize"

私はをスタイリッシュなコンポーネントで使用しています。ドキュメントは、それが正常に動作します const Heading = styled.h1` font-size: ${fontSize}; line-height: ${lineHeight}; margin-bottom: ${marginBottom}; `; ... nested object dec

1熱

1答えて

リアクションコンポーネントの小道具でスタイリッシュコンポーネントを使用する

私はリアクションjsプロジェクトでスタイリッシュなコンポーネントを使用しています。私のスタイリッシュなコンポーネントimgを構築するときに、コンポーネントが取得する小道具にバックグラウンドを依存させたい。私は機能コンポーネントを構築していた場合、私はちょうど使用：コンポーネント内 const FramedImage = styled.img` background-size: cov

0熱

1答えて

異なる小道具を扱うための異なるCSSを注入しないスタイルードコンポーネント

スタイリングされたコンポーネントが、必要なCSSのすべてをページのヘッダーに挿入しない原因を知りたいと思います。 const Button = styled.button` background-color: ${props => props.disabled ? "red" : "blue"} ` そしてそうようにそれを使用する：私はそうのような既存のプロジェクトでは、超簡単なボ

6熱

2答えて

スタイル付きコンポーネントを使ったJest themeProvider

私はこれをgithub projectといい、KeyPad.jsコンポーネントの簡単なテストを書こうとしています。私はこの問題について開かれた問題を見ており、解決策の1つとしてコンポーネントをpropとしてテーマを渡すことをお勧めします。この解決策は酵素では機能しない。私の場合の問題は、子コンポーネントがThemeProviderを通じてテーマを受け取って、テーマのpropをallに追加する必

3熱

2答えて

スタイリッドコンポーネントで変数を設定する

私は、CSS復号化ブロックで複数回使用されるprop値を持っています。 DRYを達成するために変数を最初に設定することは可能ですか？er code？以下は、私が探しているものを示すための素朴な例です。これはうまくいかず、変数sizeは後でアクセスできません。 const Link = styled.a` ${props => {const size = props.size}};

0熱

1答えて

"Styled-components"を使ってアプリ全体のベーススタイリングを追加するにはどうすればよいですか？

それでは、私のようなアプリのためのいくつかの基本スタイルを持っているとしましょう： :root { --color-primary: #eb2f64; --color-primary-light: #FF3366; --color-primary-dark: #BA265D; } * { margin: 0; padding: 0; }