목록2024/07/22 (1)

My Boundary As Much As I Experienced

Next.js14) tailwind에서 동적 스타일링 제대로 구현하기

삼항연산자를 이용한 동적 스타일링테일윈드에서 동적으로 스타일링 할 때 아래와 같은 방법을 사용한다.isRed의 값에 따라 bg-red-500이냐 bg-blue-500이냐를 가른다.interface DynamicProps { isRed: boolean;}export default function DynamicStyledButton({isRed}: DynamicProps) { return ( setIsRed(!isRed)} className={`px-4 py-2 text-white font-bold rounded ${isRed ? 'bg-red-500' : 'bg-blue-500'}`} > Click me! );}  class의 일부..
FrontEnd/Next.js 2024. 7. 22. 11:34
이전 Prev 1 Next 다음