Javascript 在样式化组件中模拟主题

我的测试失败了，因为我的样式化组件正在使用从样式化组件传下来的主题

但当我这么做的时候：

background-color: ${({ theme }) => theme.backgroundColor};

没关系

但当我这么做的时候

background-color: ${({ theme }) => theme.background.color};

它说它不能读取未定义的颜色，我很困惑为什么它允许一个而不允许另一个

在代码本身中，它可以正常工作，但测试失败了，我如何传递主题，使测试再次通过

---

为什么它适用于第一个而不适用于第二个呢？

这是因为主题对象中没有定义背景，并且您得到了一个错误，即

无法读取未定义的属性颜色。您可以覆盖/向主题添加一些属性。您必须在主题中添加background.color。有关如何为主题定义一些属性并使用它们的信息，请参见

这是样式化组件文档的一个示例：

// Define what props.theme will look like. this object can be imported as a global theme options.
const theme = {
  backgroundColor: "yellow", // -> `props.theme.backgroundColor
  // or
  background: { color: 'green' } // -> `props.theme.background.color
};  


// We are passing a default theme for Buttons that aren't wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    backgroundColor: "red"
  }
}


// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* setting the background-color value from Theme options */
  background-color: ${props => props.theme.backgroundColor};
`;


render(
  <div>
    <Button> My background color would be 'Red' </Button>

    // Use <ThemeProvider /> to wrap your theme options to your components/elements.

    <ThemeProvider theme={theme}>
      <Button> My background color would be 'Yellow' </Button>
    </ThemeProvider>
  </div>
);

//定义props.theme的外观。此对象可以作为全局主题选项导入。
常量主题={
backgroundColor:“黄色”，//->`props.theme.backgroundColor
//或
背景：{color:'green'}/->`props.theme.background.color
};  
//我们正在为没有包装在ThemeProvider中的按钮传递一个默认主题
Button.defaultProps={
主题：{
背景颜色：“红色”
}
}
//定义我们的按钮，但这次使用props.theme
const Button=styled.Button`
字号：1em；
边缘：1米；
填充物：0.25em 1米；
边界半径：3px；
/*从主题选项设置背景色值*/
背景色：${props=>props.theme.backgroundColor}；
`;
渲染(
我的背景颜色是“红色”
//用于将主题选项包装到组件/元素。
我的背景颜色是“黄色”
);
您正在使用哪些测试？我相信JSX使用backgroundColor是因为.color是为JS保留的，但是
backgroundColor
正在工作。这些测试甚至没有运行，因为它是从样式化组件中未定义的，这一部分展示了如何添加到主题中？这确实在代码中起作用，只是导致测试失败。我也定义了测试，因为我正在将我的对象作为主题导入该文件，如：
import{theme}from'../../theme
查看我添加到答案中的更新内容。只需定义一个
ThemeProvider
并将一个道具传递为
theme={theme}
。我这样做了，问题是出于某种原因，它不喜欢深对象表示法。因此它允许
theme.backgroundColor
，但随后会出现
theme.background.color