Styling

Dorai components are unstyled and grants you the freedom to add your own styling choice when implementing design systems.

Dorai components are HTML tags wrapped with functionalities. They receive all of the default props such as className, styles e.t.c.

Render Props

States such as   active , open ,  checked of a component are exposed via render props and grants you the ability to style different state.

Let's style the Dorai switch component using vanilla CSS and the render props checked

source code: here

Attributes

Component states are also exposed with a aria-* attributes and can be leveraged for styling.

We can also accomplish styling using the aria-checked attribute as shown below;

.switch[aria-checked='true'] .indicator {
  left: 36.5px;
  background: #ffffff;
}

With the above approach, we can have a simplified component as shown below;

import React from 'react'
import { Switch } from '@dorai-ui/switch'
import './styles.css'

function SwitchComponent() {
  return (
    <Switch.Group className='group'>
      <Switch className='switch'>
        <Switch.Indicator className='indicator' />
      </Switch>
      <Switch.Label className='label'>Toggle Switch</Switch.Label>
    </Switch.Group>
  )
}