I am working on a styled component that needs to receive a prop to determine if it should have a margin on the left or right.
It seems that there is a syntax issue that I am struggling with.
Here is the code snippet:
const FormDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
flex: 1;
position: relative;
${({ left }) =>
css`
*** margin${'-'}${left ? 'right' : 'left'}: 30vw; ***
`};
@media ${device.mobileS} {
height: 100%;
flex-grow: 1;
}
@media ${device.tablet} {
height: 100vh;
width: 100%;
}
`;
export default FormDiv;
Even after passing 'left' or 'right' as props in the component, it doesn't apply any margin. How can I correct the syntax in the bold sentence?