从样式化组件在样式内进行React Use主题变量

Question

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

在我的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行）。

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

在控制台中，如果删除暗模式，则可以看到颜色变量发生了变化。我需要按钮样式的效果相同。我如何从

中的主题提供者访问正在使用的主题

const ButtonElem = styled("div")(

演示：

在codesandbox中打开控制台，您将看到当前主题。删除暗模式并保存，您将看到更改。 https://codesandbox.io/s/blue-cache-bp9ns?fontsize=14

Answer 1

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

const type = props => (variant({

}));