将 mixins 传递给样式化组件答案

【问题标题】：passing mixins to styled-component将 mixins 传递给样式化组件
【发布时间】：2019-04-30 22:47:35
【问题描述】：

我正在尝试将一个 mixin 从 Material UI 传递给一个样式化组件。问题是我无法找到一种方法来将 mixin 值传递给 styled-component 而不将其分配给 css 属性。例如，这是不可能的：

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

编辑：问题最终是结束“}”旁边的分号。我相信添加分号会使 styled-component 认为您添加的是普通属性，而不是 mixin。

【问题讨论】：

这方面有什么更新吗？正确答案？

标签： css material-ui styled-components

【解决方案1】：

你需要传播 mixins 而不是调用它，像这样：

const Example = styled.div`
  ${props => ({ ...props.theme.mixins.toolbar })}
`;

然而，这将返回样式对象，您可能希望将生成的对象转换为与 css 兼容的语法，如下所示：

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
    }, ''))}
`;

【讨论】：

【解决方案2】：

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

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;

【讨论】：

【解决方案3】：

我看了这个documentation，而且代码很简单：

const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Offset />
    </React.Fragment>
  );
}

【讨论】：