styled-componentsでBtnコンポーネントを継承したいです。

Question

実現したいこと

以前回答をいただいたのですが状況が変わりました。

const BtnStyled = styled.button`
  buttonのcss
`;

const Btn: React.FC<Props> = (props) => {
  return <BtnStyled onClick={props.onClickFunction}>{props.text}</BtnStyled>;
};

export default Btn;

const Sample = () => {
  return(
  <>
    <BtnBlueStyled text="青ボタン" onClickFunction />
    <BtnRedStyled text="赤ボタン" onClickFunction />
  </>
);
}

このような場合、どうしたら良いのでしょうか?

試したこと

以下ではうまくいきませんでした。

const BtnBlueStyled = styled(Btn)`
  background: blue;
`;

Answer 1

  background: ${(props)　=> props.background};

BtnStyledの方でpropsの値に頼ることでコンポーネント毎に色を変えることができました。しかしもっと良い方法があるような気がします。