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

import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));

function App() {
    return (
        <SectionComponent customTitle="My App">
            Custom Content
        </SectionComponent>
    );
}

root.render(<App />);

Last updated