Styling

Here are several ways to change the look of a component. There are two ways to change the style: by changing all common components or by individual components.

Global Styling

Learn how to override the default CSS and load it as global CSS.

First, copy dist/styles/index.css and create a new css file named custom.css.

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

index.tsx

import 'custom.css'

custom.css

.tremolo-any-component {
  /* customizing */

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

Next, overwrite the css of the component you wish to change.

All components provided by tremolo-ui are prefixed with tremolo- followed by the component name.

index.tsx

import '@tremolo-ui/react/styles/index.css' // Required for partial overwriting.
import 'custom.css'

Individual Styling

To avoid polluting the global css namespace, use a mechanism called CSS Modules.

index.tsx

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

my-knob.module.css

.knob {
  &:focus,
  &:hover {
    > .activeLine {
      color: red;
    }
  }
}

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