Css 将mixin传递给样式化组件

我试图将一个mixin从materialui传递到一个样式化组件。问题是，如果不将mixin值赋给css属性，我就无法找到将mixin值传递给样式化组件的方法。例如，这是不可能的：

const Example = styled.div`
  ${p => p.theme.mixins.toolbar};
`;

---

编辑：问题最终成为结束“}”旁边的分号。我相信添加分号会让样式化组件认为您添加的是普通属性，而不是mixin。

您需要传播mixin而不是调用它，如下所示：

const-Example=styled.div`
${props=>（{…props.theme.mixins.toolbar}）
`;

但这将返回style对象，您可能希望将结果对象转换为css兼容的语法，如下所示：

const-Example=styled.div`
${props=>（Object.entries（{…props.theme.mixins.toolbar}）。reduce（（styleString，[propName，propValue]）=>{
if（propName.indexOf（'@'）！=-1）{
//迭代媒体查询
返回`${styleString}${propName}{${Object.entries（propValue）.reduce（（ss[pn，pv]）=>{
pn=pn.replace（/（[A-Z]）/g，m=>`-${m[0].toLowerCase（）}`）；
返回`${ss}${pn}:${pv+（Number.isInteger（pv）？'px'：''）}；`；
}, '')}; }`;
}
propName=propName.replace（/（[A-Z]）/g，matches=>`-${matches[0].toLowerCase（）}`）；//将camel大小写属性转换为破折号拆分的属性
返回`${styleString}${propName}:${propValue+（Number.isInteger（propValue）？'px'：''）}；`；//将css像素单位附加到整数值上
}, ''))}
`;

我阅读了您的编辑，但删除分号对我来说不起作用。这起到了作用：

import React from "react";
import { createMuiTheme } from "@material-ui/core/styles";
import styled, { ThemeProvider } from "styled-components";

const Content = styled.div`
  toolbar: ${props => props.theme.mixins.toolbar};
`;

const theme = createMuiTheme();

const Wrapper = props => {
  return (
    <ThemeProvider theme={theme}>
      <Content children={props.children} />
    </ThemeProvider>
  );
};

export default Wrapper;

从“React”导入React；
从“@material ui/core/styles”导入{createMuiTheme}”；
从“样式化组件”导入样式化的{ThemeProvider}；
const Content=styled.div`
工具栏：${props=>props.theme.mixins.toolbar}；
`;
const theme=createMuiTheme（）；
const Wrapper=props=>{
返回(
);
};
导出默认包装器；

有关于此的更新吗？正确答案？