私のブログに掲載されたオリジナルポストhttps://ms314006.github.io/start-learn-styled-components-extending-styles/
こんにちは、みんな、クラークです!このポストで私は私が学ぶスタイルのコンポーネントについての詳細を共有するつもりです.どのようなスタイルのコンポーネントを知らない場合は、最後のポストに行くことができる、私はそれが何かを紹介していた.

拡張スタイル

我々が我々のプロジェクトでスタイル付きのコンポーネントを使用するならば、我々はCSSを定義するためにプログラム言語のようにより多くの方法でできます.
スタイルコンポーネントコールを定義できますButton , このスタイルのコンポーネントでは、いくつかの基本CSSを定義しました.

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  border: 1px solid black;
  border-radius: 5px;
  font-size: 20px;
`;

const App = () => (
  <>
    <Button>Base Button</Button>
  </>
);

export default App;

上記のコードの結果

ボタンは素晴らしいです、しかし、私がボタンの境界の色を変えて、他のスタイルを保つことを望むならば、我々は何をすることができますか?
別のスタイルのコンポーネントを作成する?

const DangerousButton = styled.button`
  border: 1px solid red;
  border-radius: 5px;
  font-size: 20px;
`;

だめ！

あなたは、上記と同じものをより美しく、より簡単に維持するためにスタイルを拡張することができます.
拡張スタイルを使用する方法は、次のコードのように、新しいスタイルのコンポーネントを作成するときに、スタイルベースのコンポーネントを提供します

const Button = styled.button`
  border: 1px solid black;
  border-radius: 5px;
  font-size: 20px;
`;

const DangerousButton = styled(Button)`
  border: 1px solid red;
`;

The DangerousButton 拡張スタイルButton と同じ設定のスタイルをオーバーライドしますborder 上の例では.
その結果、

それで、良い?また、他のタグを使用し、同じ設定のスタイルを維持する場合は、単にタグの名前を変更することができます.言い換えると、他のタグを使用するとき、同じスタイルを拡張できます.その方法はas 小道具とスタイルのコンポーネントを使用するときにレンダリングするタグ名を与えます.
それで、私がスタイルを広げたいならばButton そして、a or div , あなたはas 小道具a or div 使用するときButton :

const App = () => (
  <>
    <Button as="a" href="https://dev.to">Base Button</Button>
    <Button as="div">Base Button</Button>
  </>
);

上記の結果Button はdiv and a :

結論

したがって、このポストによると、スタイルコンポーネントを使用すると、スタイルを定義することができます.スタイルのコンポーネントは非常に便利で面白いです!😃