React Chip Set Component Styling

CSS variables

React Chip Set supports CSS variables for easy customization. These variables are defined in CoreUI Sass and can also be overridden directly in your stylesheets or inline styles.

--cui-chip-set-gap: #{$chip-set-gap};

How to use CSS variables

const customVars = {
  '--cui-chip-set-gap': '0.5rem',
}

return (
  <CChipSet style={customVars}>
    <CChip value="apple">Apple</CChip>
    <CChip value="banana">Banana</CChip>
  </CChipSet>
)

Sass variables

Sass variables set these defaults at build time and are removed in v7. The CSS variables above reach the same values without recompiling, and can be set on a single element.

$chip-set-gap: .25rem !default;