我正在使用react js，我想让这个html代码在手机上响应。我该如何做到这一点可能需要媒体查询，但如何在react上编写媒体查询？我应该在这个代码上添加或更改什么以使其响应
<div className = "rock">
<div className="container" >
<div className="row">
<div className="col-sm-6 form-group" style={{paddingTop: '15%', paddingRight: "130px"}}>
<div className ="Fire"><img src="../img/firelogo.PNG" alt="try again" /></div>
<div className="continer">
<form method="post" className="form" id="form">
<p style={{fontSize: '24px'}}> Login </p>
<div className="txt_field">
<input type="text" required name="employeeid" id="employeeid" />
<span></span>
<label>Employee ID</label>
</div>
<div className="txt_field">
<input type="password" required name="password" id="password" />
<span></span>
<label>Password</label>
</div>
<a style = {{color: "black", fontSize: "16px"}} href ="true">Forgot Password?</a>
<div style ={{paddingTop: "12%"}}>
<button className="btn btn-danger mt-4" type="submit">Login</button>
</div>
</form>
</div>
</div>
<div className="col-sm-6 form-group" style={{width: '100%', height: 'auto', objectFit: 'contain'}}>
<img src="../img/Cap1.PNG" alt="try again" style ={{width: "125%", height: "100%"}} />
</div>
</div>
</div>
</div>
媒体查询未构建到React库中。
您可以是否：
- 使用外部css文件，该文件必须以适当的样式链接到
<head>中 - 使用库，如：https://material-ui.com/components/use-media-query/