Медиа-запросы в Material-UI с использованием Styled-компонентов - PullRequest
Новая
       70

Медиа-запросы в Material-UI с использованием Styled-компонентов

1 голос
/ 26 января 2020

Material UI имеет хороший набор встроенных медиазапросов: https://material-ui.com/customization/breakpoints/#css -media-query

Material UI также позволяет нам использовать Styled-Components с Material UI: https://material-ui.com/guides/interoperability/#styled -компоненты

Я хочу знать, как объединить их вместе. То есть, как я могу создавать медиазапросы, используя Styled Components и встроенные точки останова Material-UI?

Спасибо.

UPDATE:

Здесь пример того, что я пытаюсь сделать: 

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,
}))

Ответы [ 2 ]

3 голосов
/ 26 января 2020

Ниже приведен пример, показывающий один из способов использования точек останова темы Material-UI с styleled-компонентами. Это передает тему Material-UI в styled-components ThemeProvider, чтобы сделать ее доступной в качестве опоры в стилях. В этом примере также используется StylesProvider с опорой injectFirst, так что стили Material-UI будут появляться в начале <head>, а не в конце, так что стили style-компонентов появляются после стилей 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>
  );
}

Edit MUI theme breakpoints with styled-components

Связанная документация:

0 голосов
/ 26 января 2020

Точки останова предоставляются как часть темы по умолчанию.

Они являются константами и не изменятся, поэтому вы можете использовать их в компонентах или стилизованных темах: 

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

Edit Styled Components

...