JSS에서 미디어 쿼리의 중단 점을 정의 할 때 변수를 사용하는 방법

Question

미디어 쿼리 중단 점 정의에서 상수 파일의 변수를 사용하고 싶습니다.

.footer1 { 
    '@media (max-width: ' + Breakpoint.mobile + 'px)': { 
    position: "fixed", 
    bottom: 0, 
    left: 0, 
    width: "100vw", 
    }, 
    } 

그것은 터미널의 더하기 (+) 기호에 저에게이 오류가 발생합니다 : 내가 중단 점을 정의하는 변수를 사용할 수있는 경우

Module build failed: SyntaxError: Unexpected token (7:28) 
'@media (min-width: ' + STYLE_CONST.breakPoints.tablets + 'px)': { 
        ^

그것은 좋은 것 나는 이런 식으로 뭔가를 쓰고 싶어요. 해결책이 있습니까?

Answer 1

그럼 당신이 그와 같은 문자열을 연결 할 수없는, 적절한 방법은 템플릿 리터럴을 사용하는 것입니다

[`@media (max-width:${Breakpoint.mobile}px)`] 

훨씬 청소기 것 때문에 나는이 방법을 선호

const mobileBreak = '@media (max-width: 720px)'; 
.footer1 {` 
[mobileBreak]: `{ 
    position: "fixed", 
    bottom: 0, 
    left: 0, 
    width: "100vw", 
    }, 
    }