CSSモジュール

/*
他の`.css`や`.module.css`ファイルの`.error {}`と衝突することを心配する必要はありません！
*/
.error {
  color: white;
  background-color: red;
}

import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      // インポートされた`styles`オブジェクトのプロパティとして「error」クラスにアクセスしていることに注意してください。
      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}>ダイアログを開く</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>閉じる</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>こんにちは。私はダイアログです。</p>
      </Dialog>
    </div>
  )
}