React js의 스타일이 지정된 구성 요소와 함께 미디어 쿼리에서 CSS를 사용하는 방법

WBOY
풀어 주다: 2024-07-18 18:15:12
원래의
1178명이 탐색했습니다.

How to use CSS in Media Queries with styled components in 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: 밝은 산호색
최대 너비 480px: 연두색
이렇게 하면 스타일 구성 요소가 포함된 CSS 미디어 쿼리를 사용하여 React 구성 요소에 반응형 스타일을 쉽게 추가할 수 있습니다.

추가 팁
필요에 따라 더 복잡한 스타일과 미디어 쿼리를 추가할 수 있습니다.
미디어 쿼리를 다른 스타일 구성 요소 기능(예: 테마)과 결합하면 스타일을 더욱 강력하고 유지 관리하기 쉽게 만들 수 있습니다.

위 내용은 React js의 스타일이 지정된 구성 요소와 함께 미디어 쿼리에서 CSS를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿