相关疑难解决方法(0)

Material UI 有一组很好的内置媒体查询：https : //material-ui.com/customization/breakpoints/#css-media-queries

Material UI 还允许我们将 Styled-Components 与 Material UI 一起使用：https : //material-ui.com/guides/interoperability/#styled-components

我想知道如何将两者结合在一起。也就是说，如何使用样式化组件和 Material-UI 的内置断点进行媒体查询？

谢谢。

更新：

这是我正在尝试做的一个例子：

import React, { useState } from 'react'
import styled from 'styled-components'


import {
  AppBar as MuiAppBar,
  Drawer as MuiDrawer,
  Toolbar,
} from '@material-ui/core'


const drawerWidth = 240

const AdminLayout = ({ children }) => {

  return (
    <BaseLayout>
      <AppBar position="static">
        <Toolbar>
          TOOLBAR
        </Toolbar>
      </AppBar>
      <Drawer>
        DRAWER
      </Drawer>
      {children}
    </BaseLayout>
  )
}

AdminLayout.propTypes = {
  children: PropTypes.node.isRequired,
} …