반응에서 clsx를 사용하는 방법

반응에서 clsx를 사용하는 방법

나는 대응의 구성요소에 클래스 이름을 할당하는 데 clsx의 몇 가지 용도를 이해하려고 한다.

시공

className={clsx(classes.menuButton, open && classes.hide)} 

충분히 명확하다.'classes.menuButton'을 적용하며, 'classes'를 적용하기도 한다.hide'는 부울의 값이 'open'이면 hide이다.

내 질문은 이 두 번째 예와 관련이 있다.

className={clsx(classes.appBar, {[classes.appBarShift]: open })}

이것은 'classes.appBar'를 적용할 것이다.그러나 두 번째 매개변수의 의미는 무엇인가?

clsx일반적으로 주어진 것을 조건부로 적용하기 위해 사용된다.className

이 구문은 어떤 클래스는 특정 조건이 다음과 같이 평가될 경우에만 적용된다는 것을 의미한다.true

const menuStyle = clsx({
    [classes.root] : true, //always applies
    [classes.menuOpen] : open //only when open === true
})

이 예에서[classes.menuOpen](그것은 비슷한 것으로 평가될 것이다.randomclassName123)은 다음에 해당하는 경우에만 적용된다.open === true

---

clsx기본적으로 보간법을 출력한다.따라서 반드시 사용할 필요는 없지만, 일반적인 관행은 아니다.

공식 문서를 체크 인할 수 있는 지원되는 구문이 많다.

대신에

<div className={`${classes.foo} ${classes.bar} ${classes.baz}`} />

이렇게 쓰면 된다.

const { foo, bar, baz } = classes
const style = clsx(foo, bar, baz)

return <div className={style} />

많은 사람들이 이미 꽤 잘 설명해 주었다.나는 여전히 className을 포함하는 예를 추가하고 싶었다.이 예에서 주어진 조건이 true로 평가될 경우 적용되는 여러 클래스를 볼 수 있다.예제에서는 부울 값, 부울 변수 또는 비교 문자열(일치가 일치하면 true를 반환함)을 사용하여 클래스를 적용할 수 있다.학급.classes.drawer항상 적용되며 조건에 의존하지 않는다.

className={clsx(classes.drawer, {                  // classes.drawer is applied always
          [classes.drawerOpen]: true,              // classes.drawerOpen is applied always, bool = true
          [classes.drawerClose]: !open,            // you can also use boolean variable
          [classes.drawerRed]: colorVar === 'red', // you can also use string variable
        })}

classes.appBarShift다음에 한해서만 적용될 것이다.open로 평가하다.true. 어레이에 클래스가 더 많은 경우 모든 클래스가 적용됨open로 평가하다.true

참조URL: https://stackoverflow.com/questions/57557271/how-to-use-clsx-in-react