メインコンテンツまでスキップ

スタイリング

ここでは、コンポーネントの見た目を変更するためのいくつかの方法をご紹介します。 スタイルの変更は、共通するすべてのコンポーネントを変更する方法と、個々のコンポーネントごとに変更する方法があります。

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

デフォルトのCSSを上書きし、グローバルなCSSとして読み込む方法をご紹介します。

まず、dist/styles/index.css をコピーし、custom.css という名前で、新たなcssファイルを作成します。

cp node_modules/@tremolo-ui/react/dist/styles/index.css custom.css
custom.css
.tremolo-any-component {
  /* customizing */

  &:hover, &:focus {
    /* hover and focus styles */
  }
}

次に、変更したいコンポーネントのcssを上書きします。

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

index.tsx
import '@tremolo-ui/react/styles/index.css' // 部分的な上書きの場合、必要
import 'custom.css'

🧩個別のスタイリング​

グローバルなcss名前空間を汚染しないために、CSS Modulesという仕組みを使用しましょう。

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

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

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

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
      }}
    >
      <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

🧭次のステップ​

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