Skip to content

Styled Components Snippets

Simple styled component snippets for VScode.

Supported languages (file extensions)

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)

Snippets

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

Imports

Trigger	Content
`imst→`	Import styled from styled-components

Component Boilerplate

Trigger	Content
`stc→`	Styled component boilerplate
`stcr→`	Styled component boilerplate for styling a react component
`stcc→`	Create a styled component from html element and a react component wrapper
`stccr→`	Create a styled component from react component and a react component wrapper

Props

Trigger	Content
`stp→`	Use a prop in a styled component
`stpt→`	Use a prop in a ternary
`stpo→`	Use a prop in an OR
`stpd→`	Use a prop in a styled component via destructuring assignment
`stpdt→`	Use a prop in a ternary via destructuring assignment
`stpdo→`	Use a prop in an OR via destructuring assignment