passing mixins to styled-component - css

Question

I am trying to pass a mixin from Material UI to a styled-component. The issue is that I can't figure out a way to pass the mixin value to the styled-component without assigning it to to a css property. For example, this is not possible:
const Example = styled.div`
${p => p.theme.mixins.toolbar};
`;
Edit: The issue ended up being the semi-colon next to the closing '}'. I believe adding a semi colon makes the styled-component think that you are adding a normal property, not a mixin.

Answer 1

You need to spread the mixins not calling it, like so:
const Example = styled.div`
${props => ({ ...props.theme.mixins.toolbar })}
`;
Yet that will return style object, you might wanna convert the resulting object into css-compatible syntax as follows:
const Example = styled.div`
${props => (Object.entries({ ...props.theme.mixins.toolbar }).reduce((styleString, [propName, propValue]) => {
if (propName.indexOf('#') !== -1) {
// iterate over media queries
return `${styleString}${propName} { ${Object.entries(propValue).reduce((ss, [pn, pv]) => {
pn = pn.replace(/([A-Z])/g, m => `-${m[0].toLowerCase()}`);
return `${ss}${pn}:${pv+(Number.isInteger(pv) ? 'px' : '')};`;
}, '')}; }`;
}
propName = propName.replace(/([A-Z])/g, matches => `-${matches[0].toLowerCase()}`); // convert camel-case properties into dash-splitted attributes
return `${styleString}${propName}:${propValue+(Number.isInteger(propValue) ? 'px' : '')};`; // append css pixel unit to integer values
}, ''))}
`;

Answer 2

I read your edit but deleting the semicolon didn't work for me. This worked:
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;

Answer 3

I read this documentation, and very simple code:
const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);
function App() {
return (
<React.Fragment>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<Offset />
</React.Fragment>
);
}