Material-UI 中使用 Styled-Components 的媒体查询

Question

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

我想知道如何将两者结合在一起。 也就是说，如何使用 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,
}

export default AdminLayout

// ------- STYLES -------
const AppBar = styled(MuiAppBar)`
  /* Implement appBar styles from useStyles */
`

const Drawer = styled(MuiDrawer)`
  /* Implement drawer styles from useStyles */
`

// STYLES THAT I WANT TO CONVERT TO STYLED-COMPONENTS
const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0,
    },
  },
  appBar: {
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
  },
  toolbar: theme.mixins.toolbar,
}))

Answer 1

下面是一个示例，展示了一种利用带有样式组件的 Material-UI 主题断点的方法。 这是将 Material-UI 主题传递给 styled-components ThemeProvider以使其可用作样式中的道具。 该示例还使用StylesProvider和injectFirst以便 Material-UI 样式将出现在<head>的开头而不是末尾，这样 styled-components 样式出现在 Material-UI 样式之后，因此在特殊性时获胜否则相等。

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";

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}>
        <AppBar>Sample AppBar</AppBar>
      </SCThemeProvider>
    </StylesProvider>
  );
}

相关文档：

• styled-components 主题用法： https : //styled-components.com/docs/advanced#theming
• StylesProvider 注入第一： https ://material-ui.com/styles/api/#stylesprovider

Answer 2

如果您使用“样式对象”方法（即“JavaScript”）来样式化组件，那么这是实现相同结果的方法。 这建立在 Ryan Cogswell 之前提到的基础之上。

如果从另一个 CSS-in-JS 系统（如 Material-UI 的内置 JSS）切换，有些人可能更喜欢这个。 此外，“样式对象”方法只需要您一次引入props ，而不是在任何行上使用props变量。 有选择是好事。 😇

样式对象

const AppBar = styled(MuiAppBar)((props) => ({
  backgroundColor: red;

  [props.theme.breakpoints.up("sm")]: {
    backgroundColor: orange,
  },
  [props.theme.breakpoints.up("md")]: {
    backgroundColor: yellow,
    color: black,
  },
  [props.theme.breakpoints.up("lg")]: {
    backgroundColor: green,
    color: white,
  },
}));

样式对象，但更简洁

由于我们只需要使用 JavaScript 方法访问一次 props 并且我们只在这个样式区域使用主题，我们可以用更少的代码从传入的props解构theme 。

const AppBar = styled(MuiAppBar)(({ theme }) => ({
  backgroundColor: red;

  [theme.breakpoints.up("sm")]: {
    backgroundColor: orange,
  },
  [theme.breakpoints.up("md")]: {
    backgroundColor: yellow,
    color: black,
  },
  [theme.breakpoints.up("lg")]: {
    backgroundColor: green,
    color: white,
  },
}));

注意：如果您使用的是 TypeScript 并且已经设置了 styled-components 主题以匹配 Material-UI 主题，那么类型安全在 CSS 或 JavaScript 方法中仍然可以正常工作。

Answer 3

断点作为默认主题的一部分提供。

它们是常量并且不会改变，因此您可以在组件或样式主题中使用它们：

import React from 'react';
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => {
  console.log('md', theme.breakpoints.up('md'));
  return {};
});

const BP = {
  MD: `@media (min-width:960px) `,
};

const Container = styled.div`
  background-color: green;

  ${({ bp }) => bp} {
    background-color: red;
  }
`;

export default function StyledComponentsButton() {
  useStyles();
  return <Container bp={BP.MD}>Example</Container>;
}

Answer 4

const StyledDrawer = styled(Drawer)(
  ({ theme }) => `
  .MuiDrawer-paper {
    ${theme.breakpoints.up('sm')} {
      width: 370px;
    }

    ${theme.breakpoints.down('sm')} {
      width: 100vw;
    }
  }   
`)

Answer 5

语法可能看起来很奇怪，但尝试这段代码将解释一切

const StyledDiv = styled.div`
  ${({theme}) => {
  console.log(theme.breakpoints.up('lg'));
  return "";
}}
`;
// you will see in your console
// @media (min-width:1280px)

一旦您了解了theme.breakpoints.up('lg')与@media (min-width:1280px)相同，一切都会变得显而易见。 每次放置theme.breakpoints.up(key)时，它都会被@media...字符串替换。