patterns for styling with emotion #emotion

emotionStyled.jsx

import styled from '@emotion/styled'

//html element
const Button = styled.button`
	color: turquoise;
`

//any component
const Fancy = styled(Basic)`
	color: hotpink;
`

//object style any component/element
const Child = styled.div({
	color: 'red',
})

const Parent = styled(Basic)`
	 {
		color: 'green';
	}
`

//props
const Button = styled.button`
	color: ${(props) => (props.primary ? 'hotpink' : 'turquoise')};
`

//another component
const Child = styled.div`
	color: red;
`

const Parent = styled.div`
	${Child} {
		color: green;
	}
`