React의 인라인 CSS 스타일: 미디어 쿼리를 구현하는 방법

React의 인라인 CSS 스타일: 미디어 쿼리를 구현하는 방법

React의 인라인 CSS 패턴(동영상)이 마음에 들어서 사용을 생각하고 있습니다.하지만 이것과 비슷한 질문이 있습니다.

React의 인라인 CSS 패턴을 사용하여 응용 프로그램에 대한 미디어 쿼리를 구현하는 방법은 무엇입니까?

그럴수는 없어요.다음과 같은 특정 CSS 기능이 있습니다.@media쿼리. 스타일시트의 선언 블록에 정의해야 합니다.

인라인 CSS는 키와 값의 쌍으로 적용할 수 있는 대부분의 스타일링 속성에 적합하지만 전용 스타일시트를 완전히 대체하는 것은 아닙니다.

편집:

특정 브라우저(Chrome 9+, IE 10+, Firefox 6+)에서 MediaQueryList와 같이 문서에 대한 미디어 쿼리가 변경될 때 이벤트 수신기를 추가할 수 있는 실험 개체가 있습니다.

Radium이라 불리는 초기 React 프로젝트가 있습니다. 이 프로젝트는 액티브 미디어 쿼리에 기반한 조건부 스타일링을 적용하기 위한 믹스인을 제공합니다.MediaQueryList보닛 밑에

스타일시트 없이 미디어 쿼리 및 유사 요소 같은 작업을 수행할 수 없습니다.그러나 JavaScript에서 기본 제공되는 정보에 액세스할 수 있습니다.예를 들어, 크기 조정 믹스인의 단순한 구현입니다.

var ResizeMixin = {
    componentDidMount: function(){
        window.addEventListener('resize', this._resize_mixin_callback);
    },
    _resize_mixin_callback: function(){
        this.setState({
            viewport: {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        });
    },
    componentWillUnmount: function(){
        window.removeEventListener('resize', this._resize_mixin_callback);
    }
};

그런 다음 컴포넌트에 포함시켜 다음과 같은 렌더링을 만들 수 있습니다.

render: function(){
  var style;

  if (this.state.viewport.width > 900) {
    style = {width: '45%', margin: '2.5%'};
  }
  else {
    style = {width: '100%', margin: '0'};
  }
  ...
}

이게 좋은 생각인지는 모르겠지만 할 수 있어요.

---

'naive implementation'이란 퍼포먼스에 문제가 있다는 것을 의미합니다.addEventListener는 실제로 매우 무겁기 때문에 단순한 js 이벤트 이미터로 정리해야 합니다.또한 GC 압력을 줄이기 위해 뷰포트 개체의 인스턴스를 하나만 가질 수도 있습니다.또한 브라우저가 창을 끌 때 이벤트를 매우 빠르게 내보내므로 이벤트를 조정해야 합니다.

모든 좋은 추상화처럼 시간이 있을 때 이러한 최적화를 수행할 수 있으며 이를 사용하여 구성 요소를 수정할 필요가 없습니다.

React-Responseive를 사용하면 미디어 쿼리의 특정 사용 사례를 사용할 수 있습니다.

반응 요소 요소를 미디어 사양으로 래핑할 수 있습니다.래핑된 요소는 미디어 사양을 충족하는 경우에만 렌더링됩니다.임의의 css 속성을 추가할 수 없기 때문에 범용 솔루션이 아닙니다.

아래의 간단한 절차로 작업을 수행했습니다.

1. 미디어 css 파일에서 원하는 항목에 대한 클래스를 설정합니다(예:

   @media (max-width: 768px){
   .sidebar-show{
       display: block;
    }
    .sidebar-hide{
       display: none;
    }}
   

2. 다음과 같이에 조건부 예를 들어 다음과 같습니다.showSideBar is state variable)

   <aside className={`col-md-3 ${showSideBar?"sidebar-show":"sidebar-hide"}`}>
   

파티에 늦었지만 그래도 내가 도울 수 있기를 바란다."useMediaQuery" 후크를 사용하여 후크가 true를 반환할 경우 인라인 스타일을 동적으로 적용할 수 있습니다.

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, [matches, query]);

  return matches;
}

export default useMediaQuery;

미디어 조회를 라듐 패키지와 함께 사용하려면 미디어 조회를 가져오기만 하면 되고 StyleRoot 구성 요소를 사용해야 합니다.

import Radium, { StyleRoot } from 'radium';

단, StyleRoot에서 직접 미디어 쿼리를 사용할 수 없습니다.

StyleRoot의 내용을 다른 컴포넌트에 저장해야 합니다.

언급URL : https://stackoverflow.com/questions/28405444/inline-css-styles-in-react-how-to-implement-media-queries