Your first component

The below will illustrate how to create a basic Styled Component with one prop.

import styled from "react-elevated-emotion";

type SectionComponentProps = {
    customTitle?: string;
};

const SectionComponent = styled.div<SectionComponentProps>({
    ignore: ["customTitle"],
    testid: "my-component",
    defaultProps({ customTitle, children }) {
        return {
            children: props.customTitle
                ? (<>
                    <h1>{customTitle}</h1>
                    {children}
                  <>)
                : children
        }
    }
})({
   label: "my-comp",
   padding: "10px 15px"
});

With the above styled component you can implement it in your react app

Last updated