useState의 상태 값이 css에 적용 해야 될 때가 있다.
문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.
이러한 경우 **style(인라인 스타일)**을 이용해야 한다.
한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다.
style(인라인 스타일)
export default function Item() {
const [imageSize, setImageSize] = useState({ width: 100, height: 100 });
const containerStyle = {
height: imageSize.height
width: imageSize.width,
};
return (
<div style={containerStyle}>containerStyle</div>
);
}
그 외 방법
자바스크립트의 josin 함수를 활용여 스타일을 동적으로 적용할 수 있다.
export function cls(...classnames) {
return classnames.join(' ');
}
아래 예시 코드는 모바일 환경 여부에 따라 알맞은 높이값이 적용된다.
export default function AnnouncContent(props) {
//...
const textareaHeight = isMobileDevice ? 'h-[calc(100%-32px)]' : 'h-[calc(100%-3.06vmin)]';
return (
<div className={cls('scriptTxt', textareaHeight)}>{!compareScriptToggle ? normalTxtArea() : modifyTxtArea()}</div>
);
}
참고
'Css' 카테고리의 다른 글
svg 색상 변경 (0) | 2024.08.23 |
---|---|
다크모드 적용 (emotion) (0) | 2024.08.23 |
텍스트 라인 수 제한 (0) | 2024.08.23 |
tailwind 폰트 적용 (0) | 2024.08.23 |
emotion 설치 & 사용법 (0) | 2024.08.22 |