Question

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

require('../routes/router')(app)

不过，我想知道是否有办法使它起作用（不仅对于<AppBar bgColor="secondary.main" p={{ xs: 2, sm: 3, md: 4 }}>...</AppBar>，而且对于任何Material UI组件）？也就是说，有没有一种方法可以将System与默认的Material UI组件集成在一起？

如果是，怎么办？

谢谢。

Answer 1

Box component可用于通过其component道具将Material-UI系统功能添加到其他组件。一个警告是，如果您尝试更改由组件明确控制的样式，则可能会遇到特异性问题。例如，如果您翻转Button和Button导入的顺序，则在下面的示例中Box上背景颜色的样式无法正确运行，因为这会导致它们的顺序<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>
  );
}

相关答案：Material-UI Grid does not hide whe use Display

将Material-UI系统与默认组件一起使用

1 个答案: