CSS Modules

/* 
다른 .css 또는 .module.css 파일과 충돌하는 것에 대해 걱정할 필요가 없습니다!
*/
.error {
  color: white;
  background-color: red;
}

import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      // "error" 클래스가 가져온 `styles` 객체의 속성으로 접근되는 것을 주목하세요.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

import '../styles.css'
 
// 해당 내보내기는 새 `pages/_app.js` 파일에서 필요합니다.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

import '../styles.css'
// ErrorBoundary의 CSS는 styles.css의 전역 CSS에 의존하므로, styles.css 이후에 가져옵니다.
import ErrorBoundary from '../components/ErrorBoundary'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
 
function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)
 
  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}