第 1 步：安装样式组件
首先，确保您的项目中安装了样式组件。如果没有，您可以使用npm或yarn安装它：
第 2 步：使用媒体查询创建样式组件
您可以创建样式化组件并在其中使用媒体查询。这是一个响应式容器组件的示例，它根据屏幕宽度更改其背景颜色：
解释
导入样式组件：从样式组件导入样式对象。
创建样式组件：定义样式容器组件。容器的默认背景颜色为浅蓝色。
添加媒体查询：
对于最大宽度为 768px 的屏幕，将背景颜色更改为 lightcoral。
对于最大宽度为 480px 的屏幕，将背景颜色更改为浅绿色。
使用样式组件：在应用程序组件中使用容器组件。容器内的任何内容都将应用样式，包括媒体查询。
第 3 步：渲染应用程序
当您运行 React 应用程序时，您应该看到容器根据屏幕宽度更改其背景颜色：
默认：浅蓝色
最大宽度 768px: lightcoral
最大宽度 480px：浅绿色
这样，您可以使用带有样式组件的 CSS 媒体查询轻松地将响应式样式添加到您的 React 组件中。
额外提示
您可以根据需要添加更复杂的样式和媒体查询。
将媒体查询与其他样式组件功能（例如主题）相结合可以使您的样式更加强大且易于维护。
以上是如何在媒体查询中使用 CSS 以及 React js 中的样式组件的详细内容。更多信息请关注PHP中文网其他相关文章！
