如何在媒體查詢中使用 CSS 以及 React js 中的樣式元件

第 1 步：安裝樣式組件
首先，請確保您的專案中安裝了樣式組件。如果沒有，您可以使用npm或yarn安裝它：

npm install styled-components

第 2 步：使用媒體查詢建立樣式元件
您可以建立樣式元件並在其中使用媒體查詢。這是一個響應式容器組件的範例，它根據螢幕寬度更改其背景顏色：

import React from 'react';
import styled from 'styled-components';

// Define the styled component with media queries
const Container = styled.div`
  width: 100%;
  height: 100vh;
  background-color: lightblue;

  @media (max-width: 768px) {
    background-color: lightcoral;
  }

  @media (max-width: 480px) {
    background-color: lightgreen;
  }
`;

const App = () => {
  return (
    <Container>
      <h1>Hello, World!</h1>
    </Container>
  );
};

export default App;

說明
匯入樣式元件：從樣式元件匯入樣式物件。
建立樣式元件：定義樣式容器元件。容器的預設背景顏色為淺藍色。
新增媒體查詢：
對於最大寬度為 768px 的螢幕，將背景顏色變更為淺珊瑚色。
對於最大寬度為 480px 的螢幕，將背景顏色變更為淺綠色。
使用樣式元件：在應用程式元件中使用容器元件。容器內的任何內容都會套用樣式，包括媒體查詢。

第 3 步：渲染應用程式
當您執行 React 應用程式時，您應該會看到容器根據螢幕寬度變更其背景顏色：

預設：淺藍
最大寬度 768px: lightcoral
最大寬度 480px：淺綠色
這樣，您就可以使用帶有樣式組件的 CSS 媒體查詢輕鬆地將響應式樣式新增至您的 React 元件中。

其他提示
您可以根據需要添加更複雜的樣式和媒體查詢。
將媒體查詢與其他樣式組件功能（例如主題）結合可以使您的樣式更加強大且易於維護。

以上是如何在媒體查詢中使用 CSS 以及 React js 中的樣式元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！