When utilizing multiple styled calls in Emotion to style a component, Emotion consolidates the styling layers into one wrapper component instead of adding an extra wrapper around the initial one. The previous defaultProps are retained by Emotion, but get overridden when you define Badge2.defaultProps.
To preserve any existing defaultProps, use the following syntax:
Badge2.defaultProps = {
...Badge2.defaultProps,
variant: 'standard'
}
The example below illustrates default props behavior with each successive styled wrapping. The solution is exemplified with
StyledAgainWithDefaultRetainExisting
.
import styled from "@emotion/styled";
function MyComponent({ className, ...defaults }) {
return <div className={className}>Defaults: {JSON.stringify(defaults)}</div>;
}
MyComponent.defaultProps = {
orig: true
};
const StyledMyComponent = styled(MyComponent)`
background-color: blue;
color: white;
`;
StyledMyComponent.defaultProps = {
styled: true
};
const StyledAgainNoDefaultsAdded = styled(StyledMyComponent)`
background-color: purple;
`;
const StyledAgainWithDefault = styled(StyledMyComponent)`
background-color: green;
`;
StyledAgainWithDefault.defaultProps = {
styledAgain: true
};
const StyledAgainWithDefaultRetainExisting = styled(StyledMyComponent)`
background-color: brown;
`;
StyledAgainWithDefaultRetainExisting.defaultProps = {
...StyledAgainWithDefaultRetainExisting.defaultProps,
styledAgainRetain: true
};
export default function App() {
return (
<div>
<MyComponent />
<StyledMyComponent />
<StyledAgainNoDefaultsAdded />
<StyledAgainWithDefault />
<StyledAgainWithDefaultRetainExisting />
</div>
);
}
https://codesandbox.io/s/styled-and-defaultprops-dk26u0?fontsize=14&hidenavigation=1&theme=dark