This example shows Styled-jsx (with SCSS) working for components written in TypeScript rendered both inside and outside of Storybook.

Deploy the example using Vercel or preview live with StackBlitz

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-storybook-styled-jsx-scss with-storybook-styled-jsx-scss-app

yarn create next-app --example with-storybook-styled-jsx-scss with-storybook-styled-jsx-scss-app

pnpm create next-app --example with-storybook-styled-jsx-scss with-storybook-styled-jsx-scss-app

npm run storybook
# or
yarn storybook

npm run build-storybook
# or
yarn build-storybook

You can use Vercel to deploy Storybook. Specify storybook-static as the output directory.

This example combines the following examples, with some required extra config added:

• with-storybook
• with-styled-jsx-scss
• with-typescript