web-dev-qa-db-ja.com

スタイル化されたコンポーネントのための複数の小道具オプション

私はスタイル化されたコンポーネントを使用して作成したNavbarコンポーネントを持っています。背景色やテキストの色を変更する小道具をいくつか作成したいと思います。

例えば： <Navbar dark>次のCSSを持つ必要があります。

background: #454545;
color: #fafafa;
 _

一方 <Navbar light>は逆にする必要があります。

background: #fafafa;
color: #454545;
 _

ただし、どちらの小道具も使用されていない場合は、デフォルトの背景とテキストの色を持ちたいです（デモ目的のために）、このようなもの：

background: #eee;
color: #333;
 _

さて、私の質問はこれをスタイル化されたコンポーネントで設定する方法です。

私は次のことができます：

background: ${props => props.dark ? #454545 : '#eee'}
background: ${props => props.dark ? #fafafa : '#eee'}
background:  #eee;
 _

そして色の色のために似たもの。

しかし、これは冗長であり、それほど優雅ではありません。私はある種のif/elseステートメントを望みたいと思います。

background: ${ props => { 
  if (props.dark) { #454545 }
  elseif (props.light) { #fafafa }
  else { #eee }
}
 _

しかし、私はそのようなものをスタイルのコンポーネントに設定する方法がわかりません。

助言がありますか？

前もって感謝します。

reactjsstyled-componentscss-in-js
6
Moshe

よりエレガントなもの（私が推測する）と現代のものは、小道具の破壊とスイッチ文を使って、次のようなスイッチステートメントを使っています。

const Button = styled.button`
  ${({primary, secondary}) => {
      switch(true) {
        case primary:
          return `background-color : green`
        case secondary:
          return `background-color : red`
      }
    }
  }
`
 _
1
Mel Macaluso

スタイルのコンポーネントはまた、あなたが小道具を読むことができる機能を受け入れます。また、代わりにテーマPROPを渡すことを選択した場合は、テーマのオブジェクトを定義することもできます。


const themes = {
  dark: css `
     background: ${colors.dark};
     color: ${colors.light};
  `,
  light: css`
     background: ${colors.light};
     color: ${colors.dark};
  `
}
export const Navbar = styled.nav(({theme})=>`
  width: 100%;
  background: ${colors.light};
  color: ${colors.dark};
  ... // rest of the css

  ${theme?themes[theme]:''}

  `)

<Navbar theme="dark" />
 _
1
akshay sehgal

あなたもこのようなことをすることができます：


 const colorType= {
   dark: '#454545',
   light: '#0a0a0a',
   normal: '#dedede'
};



export const Navbar= styled.nav`
   background: ${({color}) => colorType[color] || `${color}`};

`;

 _

そしてここであなたは：

<Navbar color="primary" />
<Navbar color="#FFFFFF" />

 _
0
user7637140