Can't use styled-components's DefaultTheme to set values

[PrivateN00b]

I'm currently trying to migrate my CSR Vite webapp into Vike, but I seem to be stuck in this issue where my theme.ts config is not being present in the global environment, hence why I get the "TypeError: Cannot read properties of undefined (reading 'text1')" errors.

import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  colors: {
    primary: "#E6005D",
    secondary: "#2548b2",
    tertiary: "#2f0060",
    quarteriary: "#00013a",
    bg: "#01000e",
    text1: "white",
    text2: "#26e2de",
    link: " #27deff  ",
    linkVisited: "#a5e2ee ",
  },
  fontSize: {
    small: "18px",
    medium: "21px",
    large: "27px",
  },
  styles: {
    contentMaxWidth: "1520px"
  }
};

export default theme;

Here is an example style where I get this issue:

import { Link } from "react-router-dom";
import { styled } from "styled-components";

const BaseLink = styled(Link)`
  display: flex;
  align-items: center;
  color: ${({ theme }) => theme.colors.text1};
  text-decoration: none;
  font-weight: bold;
  justify-content: center;
`;

// OTHER CODES

I was checking into GlobalContext, since that seems to be the most similar option to fix this issue, but it does not seem to load, as I haven't seen my console output in the web cmd.

// pages/+onCreateGlobalContext.client.ts
// Environment: client

import type { GlobalContextClient } from 'vike/types'
import theme from './styles/theme'
import { DefaultTheme } from 'styled-components/dist/types'

export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  console.log("TEST")
  globalContext.theme = theme
}

declare global {
  namespace Vike {
    interface GlobalContextClient {
      theme: DefaultTheme
    }
  }
}

I'm 101% sure it's just a newbie issue, that actually has an already implemented and easy solution with GlobalContext. Here's my branch if it helps: https://codeberg.org/PrivateNoob/privatenoob.top/src/branch/vike-migration

Thanks for the generous help and this project existing!

[brillout]

Have you seen vike-react-styled-components? Have you tried it?

It seems more like a styled-components question than a Vike one — their community might be more helpful.

[PrivateN00b]

Thank you for giving me a different way of approaching this issue. I was able to solve it, and it was actually pretty simple.

So in order to have theming, styled-components requires you to wrap your rendered content into a <ThemeProvider> where you can designate a theme object to this component like this: <ThemeProvider theme={theme}>. Usually you wrap this component in the App function, where the routing takes place with <RouterProvider> being present.

All you need to do is to wrap your rendered component, like most probably the LayoutDefault with <ThemeProvider>, but currently I only have a +Page.tsx to show an example. (I thought that this theming had to be done in a Vike specific way)

export default Page

import * as stylex from '@stylexjs/stylex';
import LeftLayout from "./components/LeftLayout";
import RightLayout from "./components/RightLayout";
import CenterLayout from "./components/CenterLayout";
import React, { useId } from 'react'
import { Config } from 'vike-react/Config'
import { theme } from "../../styles/theme";
import { ThemeProvider } from 'styled-components';

const styles = stylex.create({
  base: {
    position: "relative",
    display: "flex",
    justifyContent: "space-between",
    marginTop: "-8px",
  }
})


function Page() {
  // Will be printed on the server and in the browser:
  console.log('Rendering the landing page')

  const id = useId()
  console.log(id)

  return (
    <ThemeProvider theme={theme}>      < --- Wrap your renderable components with this
      <div {...stylex.props(styles.base)}>
        {/* <LeftLayout /> */}
        <CenterLayout />
        {/* <RightLayout /> */}
      </div>
    </ThemeProvider>
  )
}

I also installed the vike-react-styled-components package and appended it into the config.ts extends field. I haven't tested if this addition have helped this theming issure or not, so that's why I'm pointing out this is as well.

import type { Config } from 'vike/types'
import vikeReact from 'vike-react/config'
import vikeReactStyledComponents from "vike-react-styled-components/config"

export default {
  stream: true,
  extends: [vikeReact, vikeReactStyledComponents],
} satisfies Config

[brillout]

Thank you for circling back on this!

I've added this discussions to the docs:

• 2ebebdf
• https://vike.dev/styled-components#see-also

Let me know if you believe there is anything we can improve regarding styled-components integration. Have a look at the source code of vike-react-styled-components — it's tiny & contributions welcome.