Optimize your code by using a function instead:
const getShared = (props) => css`
::after {
content: '';
left: ${props.left || '0'};
width: ${props.width || '100%'};
${(otherProps) => otherProps.beta &&
`
top: 0;
`
}
`
const foo = styled.div`
${(props) => getShared(props)}
`
const bar = styled.div`
${(props) => getShared(props)}
${child} {
${(props) => getShared(props)}
}
`
If you need to override shared CSS easily, here's a simple example:
<div>
{/* this is a div that applies shared CSS */}
<div css={shared}>this is shared css</div>
{/* this is a div that extends the shared CSS in its styling */}
<FirstContainer>container extending shared css</FirstContainer>
{/* this is a div that uses shared CSS in its styling but overrides border color using a prop*/}
<SecondContainer borderColor="red">container overriding the shared css</SecondContainer>
</div>
Check out the associated styling below:
// this represents the shared CSS
export const shared = css`
width: 100px;
height: 100px;
border: solid 1px green;
margin: 40px;
`
// div applying the shared CSS
export const FirstContainer = styled.div`
${shared}
`
// div utilizing the shared CSS while also changing the border color
// props retrieve all properties passed to the SecondContainer component (similar to left in the bar component)
export const SecondContainer = styled.div`
${shared}
border-color: ${(props) => props.borderColor}
`
This is how it will look like:
https://i.stack.imgur.com/Wuc02.png