使用带有默认组件的 Material-UI 系统答案

【问题标题】：Using Material-UI System with Default Components使用带有默认组件的 Material-UI 系统
【发布时间】：2020-01-27 07:27:36
【问题描述】：

是否可以将Material-UI System 与默认的 Material UI 组件一起使用？例如，这目前不起作用：

<AppBar bgColor="secondary.main"  p={{ xs: 2, sm: 3, md: 4 }}>...</AppBar>

不过，我想知道，有没有办法让它工作（不仅适用于AppBar，还适用于任何 Material UI 组件）？即，有没有办法将 System 与默认的 Material UI 组件集成？

如果有，怎么做？

谢谢。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Box component 可用于通过 component 属性将 Material-UI 系统功能添加到其他组件。一个警告是，如果您尝试更改由组件明确控制的样式，您可能会遇到特殊性问题。例如，如果您翻转 Button 和 Box 导入的顺序，则在下面的示例中，Button 上的背景颜色样式将无法正常工作，因为这会导致它们在 <head> 中的样式顺序也可以翻转。

import React from "react";
import styled, { ThemeProvider as SCThemeProvider } from "styled-components";
import { useTheme, StylesProvider } from "@material-ui/core/styles";
import MuiAppBar from "@material-ui/core/AppBar";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

const AppBar = styled(MuiAppBar)`
  background-color: red;
  ${props => props.theme.breakpoints.up("sm")} {
    background-color: orange;
  }
  ${props => props.theme.breakpoints.up("md")} {
    background-color: yellow;
    color: black;
  }
  ${props => props.theme.breakpoints.up("lg")} {
    background-color: green;
    color: white;
  }
`;
export default function App() {
  const muiTheme = useTheme();
  return (
    <StylesProvider injectFirst>
      <SCThemeProvider theme={muiTheme}>
        <Box component={AppBar} p={{ xs: 2, sm: 3, md: 4, lg: 5 }}>
          Sample AppBar 1
        </Box>
        <div style={{ height: "100px" }} />
        <Box component={Button} bgcolor="secondary.main">
          Sample Button
        </Box>
      </SCThemeProvider>
    </StylesProvider>
  );
}

【讨论】：

谢谢——非常感谢。