Reactjs 在样式化组件中使用样式化的主题变量

目前我正在尝试用样式化的组件和样式化的系统来制作一个主题。 我创建了一个带有我需要的所有样式（theme.js）的主题，一个带有样式化组件和变体的button.jsx

在my theme.js中有颜色，并且有一个带有颜色的模式（深色）

//default
500: "#139ebe",

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

这些正在合并到一个主题对象

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

当模式为暗模式时，它应该从暗模式中获取颜色。当没有模式时，它应该得到正常的颜色

通过道具，我可以访问当前主题（参见button.jsx第77行）

演示：

在codesandbox中打开控制台，您将看到当前主题。删除暗模式并保存，然后您将看到更改。

---

这是将道具传递给变体的正确方法

const type = props => (variant({

}));

---

“如何从my中的主题提供程序访问正在使用的主题”-我不能100%确定我是否理解正确，但我访问样式化组件css中当前变量的方式是

color:${props=>props.theme.myVariable}。在这里阅读更多信息通常你会使用这种方法。现在它使用theme.js中的变量（这是静态的，因为它不会与黑暗模式对象合并）。这样做是不行的。如果转到codesandbox和button.jsx（第79行），您可以看到在更改主题模式时如何访问主题。（检查控制台）
props.theme.colors.blues[500]
我需要找到一种方法，以便能够访问样式（div）中的
props.theme.{variable}
，如果删除
styled（）
的变体部分，我想我可能已经发现了问题。现在我需要找到一种方法让它和variants@SebastiaanvanArkens找到解决方案并将其作为答案发布。我没有以正确的方式将道具传递给变体
const ButtonElem = styled("div")(

const type = props => (variant({

}));