vike-react-styled-components

vike-react-styled-components

Integrates styled-components to your vike-react app.

Installation
Settings
Version history
What it does
See also

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. Add the babel-plugin-styled-components plugin:

   // vite.config.js
   import react from "@vitejs/plugin-react"
   import vike from "vike/plugin"
   
   export default {
     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 vike-react-styled-components 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.

What it does

The vike-react-styled-components extension allows you to use styled-components without FOUC.

It collects the page's styles during SSR and injects them in the HTML, ensuring that styles are applied early (before even JavaScript starts loading).

You can learn more at:

• Vike > CSS-in-JS > Collect styles
• styled-components > Server Side Rendering

For more details, have a look at the source code of vike-react-styled-jsx (which is small).

See also

• Vike Docs > styled-components
• Vike Docs > CSS-in-JS
• styled-components Docs