props.styles examples

Unconditionally apply a single CSS class:

styles={'MyComponent'}

Unconditionally apply some inline styles:

styles={{
  color: 'red',
}}

Unconditionally apply some inline styles with the :base selector:

styles={{
  ':base': { color: 'red' },
}}

Unconditionally apply a single CSS class and a set of inline styles, using an array:

styles={[ 'MyComponent', { opacity: 0.5 } ]}

Conditionally apply a CSS class via custom :pseudo-selector:

styles={{
  ':busy': 'MyComponent_busy',
}}

Conditionally apply inline styles via custom :pseudo-selector:

styles={{
  ':busy': { opacity: 0.5 },
}}

Apply multiple CSS classes using :pseudo-selectors, including the special unconditional :base selector:

styles={{
  ':base': 'MyComponent',
  ':busy': 'MyComponent_busy',
}}