Material-UI中使用样式组件的媒体查询 [英] Media Queries in Material-UI Using Styled-Components
问题描述
材料界面具有一组不错的内置媒体查询: https ://material-ui.com/customization/breakpoints/#css-media-queries
Material UI has a nice set of built-in media queries: https://material-ui.com/customization/breakpoints/#css-media-queries
材料UI还允许我们在材料UI中使用样式化组件: https: //material-ui.com/guides/interoperability/#styled-components
Material UI also allows us to use Styled-Components with Material UI: https://material-ui.com/guides/interoperability/#styled-components
我想知道如何将两者结合在一起.也就是说，如何使用样式化组件和Material-UI的内置断点进行媒体查询?
I want to know how to combine the two together. That is, how can I make media queries using Styled Components and Material-UI's built-in breakpoints?
谢谢.
更新:
以下是我要执行的操作的示例:
Here is an example of what I am trying to do:
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,
}))
推荐答案
下面是一个示例，显示了一种通过样式组件来利用Material-UI主题断点的方法.这会将Material-UI主题传递给样式组件ThemeProvider，以使其在样式中作为道具可用.该示例还将StylesProvider与injectFirst道具一起使用，以便Material-UI样式将出现在<head>的开头而不是结尾，以便样式化组件样式出现在Material-UI样式和因此，如果特异性相同，则获胜.
Below is an example showing one way of leveraging the Material-UI theme breakpoints with styled-components. This is passing the Material-UI theme to the styled-components ThemeProvider in order to make it available as a prop within the styles. The example also uses StylesProvider with the injectFirst prop so that the Material-UI styles will occur at the beginning of the <head> rather than the end, so that the styled-components styles occur after the Material-UI styles and therefore win when specificity is otherwise equal.
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>
);
}
相关文档:
- 样式化的组件主题用法: https://styled-components.com/docs/advanced #theming
- StylesProvider注入首先: https://material-ui.com/styles/api/# stylesprovider
- styled-components theme usage: https://styled-components.com/docs/advanced#theming
- StylesProvider injectFirst: https://material-ui.com/styles/api/#stylesprovider
这篇关于Material-UI中使用样式组件的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
