material ui+reactjs应用程序中的响应按钮组按钮

Question

如何实现响应式按钮组按钮？我发现了一些信息，材料ui的ButtonGroup可以使用一个名为"；方向"；但我不知道如何将其用于媒体查询，这意味着当设备宽度较窄时，可以实时更改其方向等。我对此很陌生，请耐心等待。

import './App.css';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { deepPurple, purple } from '@material-ui/core/colors';
const dvTheme = createMuiTheme({ palette: { primary: deepPurple } });
const bvTheme = createMuiTheme({ palette: { primary: purple } });
function App() {
return (
<div className="App">
<MuiThemeProvider theme={bvTheme}>
<div className="App-header">  
<h1 id="header-text">Web Programming</h1>
</div>
</MuiThemeProvider>
<MuiThemeProvider theme={dvTheme}>
<div className="header-buttons">
<ButtonGroup variant="contained" size="large" className="btngrp" color="primary">
<Button>Overview</Button>
<Button>Features</Button>
<Button>Details</Button>
<Button>Technology</Button>
<Button>FAQ</Button>
</ButtonGroup> 
</div>
</MuiThemeProvider>
<Container>       
<div className="main">
<Grid container justify="center">

<Grid item id="feature-vid">
<video width="300" height="240" controls>
</video>
</Grid>
<Grid item id="feature-paragraph">
<h1 id="feature-text">Features</h1>
<p>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
</p>
<a href="#" id="feature-link">READ OUR FEATURES</a>
</Grid>   
</Grid>
</div>
</Container>
<Container spacing={0}>
<Grid container>
<Grid item>
<h2>Details</h2>
</Grid>
</Grid>
</Container>
</div>
);
}
export default App;

Answer 1

首先，您需要指定mediquery的条件如下：

const matches = useMediaQuery("(min-width:600px)");

然后根据匹配值更改方向：

orientation={`${matches ? `horizontal` : `vertical`}`}

正如您在这个沙箱链接中看到的，当宽度大于600px时，ButtonGroup的orientation是水平的，而对于较低的宽度值，它是垂直的。

您还可以在此处阅读Material UI中的Media查询，以及ButtonGroup API和道具。