React use theme variables inside styled from styled-components

Question

Currently i am trying to make a theme with styled-components and styled-system. I created a theme with all the styling that i need (theme.js), a button.jsx with styled components and variants.

In my theme.js are colors and there is a mode (dark) with colors.

//default
500: "#139ebe",

//modes
modes: {
  dark: {
    blues: {
      500: "white"
    }
  }
}

These are getting merged to one theme object.

const getTheme = mode =>
  merge({}, theme, {
    colors: get(theme.colors.modes, mode, theme.colors)
  });

When the mode is dark it should get the colors from the dark mode. When there is no mode it should get the normal colors.

Via props i can access the current theme (see button.jsx line 77).

const Button = props => {
  console.log("Current theme: ", props.theme.colors.blues[500]);
  return <ButtonElem as="button" {...props} />;
};

In the console you can see that the color variables changes if you remove the dark mode. I need the same effect for the styled of the button. How do i access the theme that is being used from the theme provider in my

const ButtonElem = styled("div")(

Demo:

Open the console in codesandbox, you will see the current theme. Remove the dark mode and save it, than you will see the change. https://codesandbox.io/s/blue-cache-bp9ns?fontsize=14

'How do i access the theme that is being used from the theme provider in my' - I am not 100% sure if I understood correctly but the way I access current variables inside my styled-components css is color: ${props => props.theme.myVariable};. Read more here styled-components.com/docs/advanced#theming — Sebastiaan van Arkens
Normally you would use that method. Right now it uses the variables from the theme.js (this is static because it doesn't get merged with the dark mode object). This way is not the option. if you go to codesandbox and to button.jsx (line 79) you can see how you acces the theme while changing the modes of the theme. (check console) props.theme.colors.blues[500] I need to find a way so i can access props.theme.{variable} in the styled(div) — The M
I think i might have found the issue, if you remove the variant part of the styled() it does work. Now i need to find a way to make it work with the variants — The M
@SebastiaanvanArkens found the solution and posted it as an answer. I didn't pass the props in the correct way to the variant — The M

The M The M · Accepted Answer · 2019-10-18T07:10:41

This is the correct way of passing the props to variant

const type = props => (variant({

}));

React use theme variables inside styled from styled-components

1 Answers