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}>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>
  )
}