reactjs - 在 React 中使用 Emotion CSS-in-JS 和主题

Question

首先，我对 React 还很陌生，所以我仍在学习中。

我正在关注 Introduction Article (Medium.com)关于使用Themes进行设置与 Emotion 。但我一直试图在 const 中使用主题颜色，该颜色将在 compose 中使用。

例如，我有:

const types = {
  primary: (props) => css`color: ${props.theme.blue}`,
  secondary: (props) => css`color: ${props.theme.red}`
};

const Button = withTheme(styled.button`
  composes: ${props => types[props.type]};
`);

(这是一个人为的示例。实际上，我的 primary 和 secondary 将有更多的 CSS。)

如果我渲染<Button type="primary">A Button</Button> ，颜色不会被应用。事实上，如果我检查该元素，我什至看不到 color风格。

但是，如果我更改 Button至:

const Button = withTheme(styled.button`
  composes: ${types.primary};
`);

然后我看到应用了正确的颜色。

我不完全确定我在这里做错了什么。

Answer 1

简单介绍一下背景:

Tagged template literals ES2015 的 是模板文字，可以通过用 1 对其进行“标记”来由函数进行解析(例如 styled.button )。该函数接收模板文字和所有 ${}占位符并返回结果字符串。 ${}可以包含任何被认为是 JavaScript 表达式的内容，例如单个值、函数等。

以styled为例从情感上来说，如果你将一个函数传递给任何占位符，它就会调用该函数，并传入 styled 的 props。您使用的元素(在您的示例中为 button )作为第一个参数。如果你包装 styled模板文字带有 withTheme打电话，那props参数对象将包含您最初提供给 <ThemeProvider> 的主题 Prop 在您的应用程序的基础组件中。

在您的示例中，它适用于第二个代码块的原因是因为您正在传递一个将返回值的函数。在第一个代码块中，您传递一个函数，该函数在调用时将返回另一个函数。这意味着生成的样式将包含一个函数，而不是一个值。

const types = {
  primary: (props) => css`color: ${props.theme.blue}`,
  secondary: (props) => css`color: ${props.theme.red}`
};

const Button = withTheme(styled.button`
  composes: ${props => types[props.type]};
`);

在“主要”的情况下，上述计算结果为:

const Button = withTheme(styled.button`
  composes: ${props => (props) => css`color: ${props.theme.blue}`};
`);

正如您所看到的，这太深了一层。该主题将作为 props 的一部分传入但需要为 css 调用第二个更深层次的函数然后调用的函数。在第二个代码块中，“primary”的计算结果为:

const Button = withTheme(styled.button`
  composes: ${(props) => css`color: ${props.theme.blue}`};
`);

这将给出正确的结果 styled.button将把 props 传入 and css直接在被调用函数中使用它们。

希望这是有道理的。这是我第一次尝试堆栈溢出答案，因此我很乐意改进它(如果可以的话)。