Styled-components React TS example

styledComponentTypeScript.tsx

import styled from "styled-components";

interface TitleProps {
  isActive: boolean;
}

export const Title = ({ isActive }: TitleProps) => {
  return (
    <TitleContainer isActive={isActive} id="dashboard-title">
      <h1>Dashboard</h1>
      <h2>Welcome to your portal</h2>
    </TitleContainer>
  );
};

const TitleContainer = styled.div<TitleProps>`
  h1 {
    color: ${props => (props.isActive ? "black" : "grey")};
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: 0.1rem;
  }
  h2 {
    margin: 0;
    font-weight: 300;
  }
`;