javascript - 将主题插入到 styled() 方法中

Question

我在材质 ui 上遇到了这个示例，可以在其中插入theme对象并利用theme来自的所有属性styled-component。

但是，当我尝试使用styled()来自material-ui/core/styles包的方法时，我无法让它工作。

有人可以解释如何使以下示例与来自@material-ui/core/stylespackage 的 styled() 方法一起工作吗？

例子

const StyledButton = styled(Button)`
  ${({ theme }) => `
  background-color: ${theme.palette.primary.main};
  color: #fff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 4px 10px;
  font-size: 13px;
  &:hover {
    background-color: ${darken(theme.palette.primary.main, 0.2)};
  }
  ${theme.breakpoints.up('sm')} {
    font-size: 14px;
    padding: 7px 14px;
  }
  `}
`;

标签： javascriptmaterial-uiinterpolation