React 在 styled-components 中使用主题变量

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)
  });

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

通过 props 我可以访问当前主题（参见 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

这是将 props 传递给 variant 的正确方法

const type = props => (variant({

}));

React use theme variables inside styled from styled-components