Published on Sat Aug 22 2020
The CSS prop is one of the most powerful features of styled-components. It allows us to add styling to basically any component without manually creating a styled()
version of it. Let's talk about it!
To create a styled-component, we need to create a StyledParagraph
component before we can actually use it. And once the component is created, styles will be injected into the page on mount.
import styled from 'styled-components'
const StyledParagraph = styled.p`
color: dodgerblue;
padding: 1rem;
`
//usage
<StyledParagraph>Hello!</StyledParagraph>
The CSS prop makes everything ridiculuously easy. This is how we can style a paragraph element with the CSS prop. Instead of importing styled
from styled-components
we import styled-components/macro
and then add our css rules into the css prop like so.
import 'styled-components/macro'
//usage
<p css={`
color:dodgerblue;
padding: 1rem;`}
>
Hello!
</p>
The CSS prop is a compile time babel helper. It converts
import 'styled-components/macro'
<element css={`rules`}>
to
import styled from 'styled-components'
const StyledElement = styled("element")`
rules
`
It also works with components, as long as the components are either styled components or third party components which forward className
down to underlying elements.
import 'styled-components/macro'
function GoodComponent({className, children}){
return <p className={className}>{children}</p>
}
//usage
<GoodComponent css={`
color:dodgerblue;
padding: 1rem;
`}>
Hello!
</GoodComponent>
The CSS Prop is an awesome addition to styled-components and helps us write styled components much quicker. I am sure you will love using it in your projects!