css-modules

css-modules.tsx

import * as styles from 'foo.css'

type CssMap = typeof styles

export const legacyCss: CssMap = {
  container: 'mc-foo',
  content: 'mc-content'
}
export interface Props {
  css: CssMap
}

export function Foo (props: Props) {
  return (
    <div className={props.css.container}>
      <div className={props.css.content}/>
    </div>
  )
}

// Legacy mapping by default
Foo.defaultProps = {
  css: legacyCss
}

export {CssMap}

// Consumer
function Bar () {
  const css: CssMap = {
    ...legacyCss,
    content: 'custom-content-class'
  }
  return <Foo css={css} />
}