Styled component example

Button.tsx

import './Button.scss';
import { ButtonRed2 } from './Button.styles'

export type ButtonTypes = {
  variant?: string;
  children: React.ReactNode;
  onClick: React.MouseEventHandler;
  type?: 'button' | 'submit';
};

const defaultProps = {
  variant: '',
  type: 'button',
};

const Button: React.FC<ButtonTypes> = ({ onClick, variant, children, type }) => {
  const classVariant = variant ? `button button--${variant}` : 'button';

  return (
    <ButtonRed2 onClick={onClick} className={classVariant} type={type} variant={variant}>
      {children}
    </ButtonRed2>
  );
}

Button.defaultProps = defaultProps;

export default Button;

Component.styles.ts

export const Title = styled.h1`
    color: red;
    margin: 1px;
`

const TitleVariant = styled.h1<{ banana: string }>`
	color: ${({ banana }) => banana}; 
	margin: 0;
	line-height: 1.15;
	font-size: 4rem;
	text-align: center;
	text-decoration: none;
`;

export const ButtonRed = styled.button<{variant?: string}>(({ variant }) => `
    color: ${variant || 'red'};
`)

export const ButtonRed2 = styled(ButtonRed)`
    background-color: purple;
`;