[리액트(React)] CSS 스타일링 및 동적 스타일링

// CSS 스타일링

- 리액트에서 클래스를 설정하기 위해 className prop을 사용한다.
   ~ className="클래스속성명"

---

<button className="active">

 

#examples menu button.active {
  background-color: #7925d3;
  color: #ebe7ef;
}

---

// CSS 동적 스타일링

- 조건부로 클래스 속성을 추가할 수 있다.
   ~ className={조건 ? '클래스속성명' : ''}

- 상위 컴포넌트에서 boolean 값을 전달받아 클래스 속성을 추가할 수 있다.

---

export default function App() {
  return (
    <div>
      <main>
        <section id="examples">
          <menu>
            <TabButton
              isSelected={selectedTopic === 'components'}
              onSelect={() => handleSelect('components')}
            >
              Components
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'jsx'}
              onSelect={() => handleSelect('jsx')}
            >
              JSX
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'props'}
              onSelect={() => handleSelect('props')}
            >
              Props
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'state'}
              onSelect={() => handleSelect('state')}
            >
              State
            </TabButton>
          </menu>
          {tabContent}
        </section>
      </main>
  );
}

 

export default function TabButton({ children, onSelect, isSelected }) {
  return (
    <li>
      <button className={isSelected ? 'active' : ''} onClick={onSelect}>
        {children}
      </button>
    </li>
  );
}