How to set initial value with styled component props - styled-components

Question

I am making app using styled components.
I would like to pass some props to position my element
In a situation where no props gets passed I want to set a value initial
Of course if I do something like in example I get error
Cannot find name 'initial'.ts(2304)
<SomeStyledComponent top="20px" />
const SomeStyledComponent = styled.div`
position: absolute;
top: ${(props) => props.top || initial} !important;
`

Answer 1

const SomeStyledComponent = styled.div`
position: absolute;
top: ${(props) => props.top ? props.top : initial} !important;
`

Answer 2

You get error because variable with name "initial" has not been defined.
You can define initial value direct in component.
In fourth variant , i show how fix error in your example.
// first variant
const Component = styled.div`
position: absolute;
top: ${(p) => `${p.top || 20}px`};
`
// second variant
const Component = styled.div`
position: absolute;
top: ${(p) => `${p.top}px`};
`
Component.defaultProps = {
top: 200
}
// third variant, set default value in wrapper component
const BaseComponent = styled.div`
position: absolute;
top: ${(p) => `${p.top}px`};
`;
const Component = ({ top = 50, children, ...rest }) => (
<BaseComponent top={top} {...rest}>
{children}
</BaseComponent>
);
// fourth variant, your example with fix
const initial = "200px"
const SomeStyledComponent = styled.div`
position: absolute;
top: ${(props) => props.top || initial} !important;
`