Styling

The default look and feel of inputs is Bootstrap-esque and intended to be a neutral starting point for customization. React widgets's theme is written in Sass. Be sure to configure which ever bundler your using to handle .scss files. Be sure to install sass not node-sass, the latter does not support the necessary Sass features RW depends on.

Customize#

Styles can be fully customized through Sass's module configuration syntax: https://sass-lang.com/documentation/at-rules/use#configuration

my-theme.scss

@use "react-widgets/styles.scss" with (
  $input-height: 2.5em,
  // Most component variables are forwarded with a namespace
  $list-selected-bg: #49c6de,
);

A la carte component builds#

You may not need every input RW offers. To keep your bundles small, you can configure exactly which components you want to include styles for with the $components variable.

@use "react-widgets/styles.scss" with (
  $components: (
    'Listbox',
    'DropdownList',
    'Combobox',
    'Multiselect',
    // 'DatePicker',
    // 'Calendar',
    // 'TimeInput',
    'NumberPicker'
  )
);

Components that depend on each other will automatically be enabled if required. E.g. Calendar is required to use DatePicker, so is enabled automatically when you include DatePicker.

Font and Input sizes#

Component sizing is done via em units, and the base font-size is 1em enabling components to scale with the surrounding font-size. If you want to use a fixed size adjust the font-size variable. Using the default values, inputs were designed with a 16px font size in mind, but you can also tweak the input height for different root font sizes.

Sass Configuration

@use "react-widgets/scss/react-widgets" with (
  $widget-font-size: 16px,
  $input-height: 2.5em
);