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"
});
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 />);