スタイリング

tremolo-ui はヘッドレスなライブラリであるため Vanilla CSS, CSS in JS, Tailwind CSS など好きな方法でスタイルを当てることができます。
ここでは、コンポーネントの見た目を変更する方法を幾つかご紹介します。

デフォルトのスタイルを適用する

バンドルされたCSSをインポートする：

Vite なら、src/main.tsx、Next.js なら、app/layout.tsx に以下を適用します。

main.tsx

import '@tremolo-ui/react/styles/index.css'

コンポーネント単位でインポートする：

Vite なら、src/main.tsx、Next.js なら、app/layout.tsx に以下を適用します。
global.css には、デフォルトのテーマと、小さなユーティリティが含まれています。

main.tsx

import '@tremolo-ui/react/styles/global.css'

コンポーネントのファイルに対応するCSSをインポートします。

MyKnob.tsx

import '@tremolo-ui/react/styles/Knob.css'
import { Knob } from '@tremolo-ui/react'

export function MyKnob() {
  // ...

この方法を使うことで、未使用のCSSがバンドルされるのを防ぐことができます。

見た目をカスタマイズする

コンポーネント単位のスタイリング

ここでは一例として、CSS Modulesを使用する方法を紹介します。

index.tsx

Loading...

import { useState } from 'react'
import { Knob } from '@tremolo-ui/react'

import '@tremolo-ui/react/styles/Knob.css'
import myKnob from './my-knob.module.css'

function App() {
  const [value, setValue] = useState(64)

  return (
    <div className={myKnob.container}>
      <Knob
        className={myKnob.knob}
        value={value}
        min={0}
        max={100}
        size={50}
        onChange={(v) => setValue(v)}
        classes={{
          activeLine: myKnob.activeLine,
        }}
      />
      {value}
    </div>
  )
}

export default App

my-knob.module.css

.activeLine {
  color: rgb(235, 76, 76);

  :where(.knob:focus, .knob:hover) & {
    color: rgb(235, 44, 44);
  }
}

:where(.dark, [data-theme='dark']) {
  .activeLine {
    :where(.knob:focus, .knob:hover) & {
      color: rgb(235, 91, 91);
    }
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

グローバル・スタイリング

デフォルトのCSSを上書きし、グローバルなCSSとして読み込む方法をご紹介します。
まず、dist/index.css をコピーし、custom.css という名前で、新たなcssファイルを作成します。

cp node_modules/@tremolo-ui/react/dist/index.css custom.css

custom.css

.tremolo-any-component {
  /* customize style here */
}

次に、変更したいコンポーネントのcssを上書きします。
tremolo-uiで提供されるすべてのコンポーネントは、tremolo- の接頭辞の後に、コンポーネント名が付いたものになります。

main.tsx

import './custom.css'

次のステップ

tremolo-uiが提供するコンポーネントを見てみましょう。
Components - Knob