vike-react-styled-components

vike-react-styled-components

Installation
Settings
Version history
See also

Integrates styled-components to your vike-react app.

Installation

1. npm install vike-react-styled-components styled-components
   npm install --save-dev babel-plugin-styled-components
   

2. Extend +config.js:

   // pages/+config.js
   
   import vikeReact from "vike-react/config"
   import vikeReactStyledComponents from "vike-react-styled-components/config"
   
   export default {
     // ...
     extends: [vikeReact, vikeReactStyledComponents]
   }
   

3. Install babel-plugin-styled-components:

   // vite.config.js
   import { defineConfig } from "vite"
   import react from "@vitejs/plugin-react"
   import vike from "vike/plugin"
   
   export default defineConfig({
     plugins: [
      vike(),
      react({
        babel: {
          plugins: [["babel-plugin-styled-components"]],
        },
      }),
    ],
   });
   

4. You can now use styled-components at any of your components.

   import { styled } from "styled-components";
   
   const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: #BF4F74;
    `;
   
   const Wrapper = styled.section`
      padding: 4em;
      background: papayawhip;
    `;
   
   function SomeComponent() {
     return (
       <Wrapper>
        <Title>Hello World!</Title>
      </Wrapper>
     )
   }
   

[!NOTE] The vike-react-styled-components extension requires vike-react.

Settings

vike-react-styled-components provides a configuration +styledComponents for customizing the StyleSheetManager.

// pages/+styledComponents.ts
export { styledComponents }

import type { IStyleSheetManager } from "styled-components"

const styledComponents = {
  styleSheetManager: {
    enableVendorPrefixes: true,
  } as Omit<IStyleSheetManager, "sheet" | "children">,
}

You can remove the styled-components SSR integration from some of your pages:

// pages/about/+styledComponents.js

export const styledComponents = null

For full customization consider ejecting.

[!NOTE] Consider making a Pull Request before ejecting.

See also

• Vike Docs > styled-components