Styled Componentsでのデフォルトプロップスの設定方法

1. デフォルトプロップスの設定方法: Styled Componentsでは、defaultPropsオブジェクトを使用してデフォルトプロップスを設定します。コンポーネントの定義の直前にdefaultPropsを定義し、プロパティとそのデフォルト値を指定します。

   import styled from 'styled-components';
   const StyledButton = styled.button`
    /* スタイルの定義 */
   `;
   StyledButton.defaultProps = {
    color: 'blue',
    size: 'medium',
   };

   上記の例では、StyledButtonコンポーネントにcolorとsizeという2つのプロパティのデフォルト値を設定しています。もし親コンポーネントからこれらのプロパティが渡されなかった場合、デフォルト値が使用されます。

2. デフォルトプロップスの利用例: デフォルトプロップスを使用することで、コンポーネントの使用側で特定のプロパティを指定しなくても、デフォルトの値が適用されます。以下は、StyledButtonコンポーネントの使用例です。

   import React from 'react';
   import StyledButton from './StyledButton';
   const App = () => {
    return (
      <div>
        <StyledButton>Click me!</StyledButton>
        {/* colorプロパティを指定しない場合、デフォルトのblueが適用される */}
        <StyledButton color="red">Click me!</StyledButton>
        {/* sizeプロパティを指定しない場合、デフォルトのmediumが適用される */}
        <StyledButton size="large">Click me!</StyledButton>
      </div>
    );
   };
   export default App;

   上記の例では、最初のStyledButtonコンポーネントはcolorとsizeプロパティを指定していません。そのため、デフォルトの値が適用され、青色の中サイズのボタンが表示されます。2番目と3番目のStyledButtonコンポーネントでは、colorとsizeプロパティを指定しているため、指定された値が適用されます。

以上が、Styled Componentsでデフォルトプロップスを設定する方法のシンプルな説明とコード例です。これを参考にして、自分のReactプロジェクトでデフォルトプロップスを活用してみてください。